<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/blog/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/blog/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/blog/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/blog/images/logo.svg" color="#222">

<link rel="stylesheet" href="/blog/css/main.css">


<link rel="stylesheet" href="/blog/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"dttx123.gitee.io","root":"/blog/","scheme":"Gemini","version":"8.0.0-rc.2","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="IT">
<meta property="og:type" content="website">
<meta property="og:title" content="Starry Night">
<meta property="og:url" content="http://dttx123.gitee.io/index.html">
<meta property="og:site_name" content="Starry Night">
<meta property="og:description" content="IT">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="大春哥">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="http://dttx123.gitee.io/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : true,
    isPost : false,
    lang   : 'zh-CN'
  };
</script>

  <title>Starry Night</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
        <span class="toggle-line toggle-line-first"></span>
        <span class="toggle-line toggle-line-middle"></span>
        <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/blog/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">Starry Night</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">这就朕为你打下的江山</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/blog/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/blog/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/blog/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/blog/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/blog/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content index posts-expand">
            
      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://dttx123.gitee.io/2020/07/24/npm/npm%E4%BD%BF%E7%94%A8%E5%B7%A5%E5%85%B7/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/blog/images/avatar.jpg">
      <meta itemprop="name" content="大春哥">
      <meta itemprop="description" content="IT">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Starry Night">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/blog/2020/07/24/npm/npm%E4%BD%BF%E7%94%A8%E5%B7%A5%E5%85%B7/" class="post-title-link" itemprop="url">npm/npm使用工具</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
              

              <time title="创建时间：2020-07-24 17:17:37 / 修改时间：17:20:49" itemprop="dateCreated datePublished" datetime="2020-07-24T17:17:37+08:00">2020-07-24</time>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="npm-使用工具"><a href="#npm-使用工具" class="headerlink" title="npm 使用工具"></a>npm 使用工具</h1><pre><code>1.   生成二维码： npm i qrcode -g
2.   获取目录结构： npm i dir-parser -g
3.   静态服务器：  npm i live-server 
4.   md转html:  npm i -g i5ting_toc</code></pre>
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://dttx123.gitee.io/2020/07/14/vue/%E9%97%AE%E9%A2%98%E6%94%B6%E9%9B%86/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/blog/images/avatar.jpg">
      <meta itemprop="name" content="大春哥">
      <meta itemprop="description" content="IT">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Starry Night">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/blog/2020/07/14/vue/%E9%97%AE%E9%A2%98%E6%94%B6%E9%9B%86/" class="post-title-link" itemprop="url">vue/问题收集</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-07-14 11:03:46" itemprop="dateCreated datePublished" datetime="2020-07-14T11:03:46+08:00">2020-07-14</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-07-15 09:14:47" itemprop="dateModified" datetime="2020-07-15T09:14:47+08:00">2020-07-15</time>
              </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="vue-相关问题收集"><a href="#vue-相关问题收集" class="headerlink" title="vue 相关问题收集"></a>vue 相关问题收集</h1><ol>
<li><p>修改配置文件后重启 项目 （如vue.config.js)</p>
</li>
<li><p>动态 确定 是否缓存组件</p>
</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">keep-alive</span> <span class="attr">v-if</span>=<span class="string">"$route.meta.keepAlive"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">keep-alive</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">router-view</span> <span class="attr">v-else</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>路由：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> constantRouterMap = [</span><br><span class="line">  &#123;</span><br><span class="line">    path: <span class="string">'/'</span>,</span><br><span class="line">    component: <span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">import</span>(<span class="string">'@/views/layouts/index'</span>),</span><br><span class="line">    redirect: <span class="string">'/home'</span>,</span><br><span class="line">    meta: &#123;</span><br><span class="line">      title: <span class="string">'首页'</span>,</span><br><span class="line">      keepAlive: <span class="literal">false</span></span><br><span class="line">    &#125;,</span><br><span class="line">    children: [</span><br><span class="line">      &#123;</span><br><span class="line">        path: <span class="string">'/home'</span>,</span><br><span class="line">        name: <span class="string">'Home'</span>,</span><br><span class="line">        component: <span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">import</span>(<span class="string">'@/views/home/index'</span>),</span><br><span class="line">        meta: &#123; <span class="attr">title</span>: <span class="string">'首页'</span>, <span class="attr">keepAlive</span>: <span class="literal">false</span> &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        path: <span class="string">'/about'</span>,</span><br><span class="line">        name: <span class="string">'About'</span>,</span><br><span class="line">        component: <span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">import</span>(<span class="string">'@/views/home/about'</span>),</span><br><span class="line">        meta: &#123; <span class="attr">title</span>: <span class="string">'关于我'</span>, <span class="attr">keepAlive</span>: <span class="literal">false</span> &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>


      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://dttx123.gitee.io/2020/07/12/webpack/vue.config.js%E5%B8%B8%E7%94%A8%E9%85%8D%E7%BD%AE/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/blog/images/avatar.jpg">
      <meta itemprop="name" content="大春哥">
      <meta itemprop="description" content="IT">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Starry Night">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/blog/2020/07/12/webpack/vue.config.js%E5%B8%B8%E7%94%A8%E9%85%8D%E7%BD%AE/" class="post-title-link" itemprop="url">webpack/vue.config.js常用配置</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
              

              <time title="创建时间：2020-07-12 22:01:11 / 修改时间：22:02:22" itemprop="dateCreated datePublished" datetime="2020-07-12T22:01:11+08:00">2020-07-12</time>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <p>今天讲述一下vue-config.js配置，我们前面搭建好脚手架会发现,这个对比2.x版本少了很多东西,没有build的配置,也没有webpack的配置,那么问题来了,我们如何去开发我们的项目呢,比如设置代理,打包配置等问题呢?</p>
<p>vue cli3.0项目中需要配置其他参数时，需要新建文件’vue.config.js’，(这文件名是固定这么写的)，与package.json在同一级目录下。</p>
<p><a href="javascript:void(0);"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></a></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 项目部署的基础路径</span></span><br><span class="line">  <span class="comment">// 我们默认假设你的应用将会部署在域名的根部，</span></span><br><span class="line">  <span class="comment">// 比如 https://www.my-app.com/</span></span><br><span class="line">  <span class="comment">// 如果你的应用时部署在一个子路径下，那么你需要在这里</span></span><br><span class="line">  <span class="comment">// 指定子路径。比如，如果你的应用部署在</span></span><br><span class="line">  <span class="comment">// https://www.foobar.com/my-app/</span></span><br><span class="line">  <span class="comment">// 那么将这个值改为 `/my-app/`</span></span><br><span class="line">  publicPath: <span class="string">'/Reader/dist/'</span>,　　<span class="comment">/*这个是我存放在github在线预览的Reader项目*/</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// 将构建好的文件输出到哪里（或者说将编译的文件）</span></span><br><span class="line">  outputDir: <span class="string">'dist'</span>,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 放置静态资源的地方 (js/css/img/font/...)</span></span><br><span class="line">  assetsDir: <span class="string">''</span>,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 用于多页配置，默认是 undefined</span></span><br><span class="line">  pages: &#123;</span><br><span class="line">    index: &#123;</span><br><span class="line">      <span class="comment">// 入口文件</span></span><br><span class="line">      entry: <span class="string">'src/main.js'</span>,　　<span class="comment">/*这个是根入口文件*/</span></span><br><span class="line">      <span class="comment">// 模板文件</span></span><br><span class="line">      template: <span class="string">'public/index.html'</span>,</span><br><span class="line">      <span class="comment">// 输出文件</span></span><br><span class="line">      filename: <span class="string">'index.html'</span>,</span><br><span class="line">      <span class="comment">// 页面title</span></span><br><span class="line">      title: <span class="string">'Index Page'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 简写格式</span></span><br><span class="line">    <span class="comment">// 模板文件默认是 `public/subpage.html`</span></span><br><span class="line">    <span class="comment">// 如果不存在，就是 `public/index.html`.</span></span><br><span class="line">    <span class="comment">// 输出文件默认是 `subpage.html`.</span></span><br><span class="line">    subpage: <span class="string">'src/main.js'</span>　　　　<span class="comment">/*注意这个是*/</span></span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 是否在保存的时候使用 `eslint-loader` 进行检查。</span></span><br><span class="line">  <span class="comment">// 有效的值：`ture` | `false` | `"error"`</span></span><br><span class="line">  <span class="comment">// 当设置为 `"error"` 时，检查出的错误会触发编译失败。</span></span><br><span class="line">  lintOnSave: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 使用带有浏览器内编译器的完整构建版本</span></span><br><span class="line">  <span class="comment">// 查阅 https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时</span></span><br><span class="line">  runtimeCompiler: <span class="literal">false</span>,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// babel-loader 默认会跳过 node_modules 依赖。</span></span><br><span class="line">  <span class="comment">// 通过这个选项可以显式转译一个依赖。</span></span><br><span class="line">  transpileDependencies: [<span class="comment">/* string or regex */</span>],</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 是否为生产环境构建生成 source map？</span></span><br><span class="line">  productionSourceMap: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 调整内部的 webpack 配置。</span></span><br><span class="line">  <span class="comment">// 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/webpack.md</span></span><br><span class="line">  chainWebpack: <span class="function"><span class="params">()</span> =&gt;</span> &#123;&#125;,</span><br><span class="line">  configureWebpack: <span class="function"><span class="params">()</span> =&gt;</span> &#123;&#125;,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// CSS 相关选项</span></span><br><span class="line">  css: &#123;</span><br><span class="line">    <span class="comment">// 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)</span></span><br><span class="line">    <span class="comment">// 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象</span></span><br><span class="line">    extract: <span class="literal">true</span>,</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 是否开启 CSS source map？</span></span><br><span class="line">    sourceMap: <span class="literal">false</span>,</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 为预处理器的 loader 传递自定义选项。比如传递给</span></span><br><span class="line">    <span class="comment">// sass-loader 时，使用 `&#123; sass: &#123; ... &#125; &#125;`。</span></span><br><span class="line">    loaderOptions: &#123;&#125;,</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 为所有的 CSS 及其预处理文件开启 CSS Modules。</span></span><br><span class="line">    <span class="comment">// 这个选项不会影响 `*.vue` 文件。</span></span><br><span class="line">    modules: <span class="literal">false</span></span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`</span></span><br><span class="line">  <span class="comment">// 在多核机器下会默认开启。</span></span><br><span class="line">  parallel: <span class="built_in">require</span>(<span class="string">'os'</span>).cpus().length &gt; <span class="number">1</span>,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// PWA 插件的选项。</span></span><br><span class="line">  <span class="comment">// 查阅 https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-pwa</span></span><br><span class="line">  pwa: &#123;&#125;,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 配置 webpack-dev-server 行为。</span></span><br><span class="line">  devServer: &#123;</span><br><span class="line">    open: process.platform === <span class="string">'darwin'</span>,</span><br><span class="line">    host: <span class="string">'0.0.0.0'</span>,</span><br><span class="line">    port: <span class="number">8080</span>,</span><br><span class="line">    https: <span class="literal">false</span>,</span><br><span class="line">    hotOnly: <span class="literal">false</span>,</span><br><span class="line">    <span class="comment">// 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理</span></span><br><span class="line">    proxy: &#123;</span><br><span class="line">          <span class="string">'/api'</span>: &#123;</span><br><span class="line">                target: <span class="string">'http://localhost:8880'</span>,</span><br><span class="line">                changeOrigin: <span class="literal">true</span>,</span><br><span class="line">                secure: <span class="literal">false</span>,</span><br><span class="line">                <span class="comment">// ws: true,</span></span><br><span class="line">                pathRewrite: &#123;</span><br><span class="line">                    <span class="string">'^/api'</span>: <span class="string">'/static/mock'</span>   <span class="comment">// 请求数据路径别名,这里是注意将static/mock放入public文件夹</span></span><br><span class="line">                &#125;</span><br><span class="line">          &#125;</span><br><span class="line">   &#125;,</span><br><span class="line">   before: <span class="function"><span class="params">app</span> =&gt;</span> &#123;&#125;</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 三方插件的选项</span></span><br><span class="line">  pluginOptions: &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://dttx123.gitee.io/2020/07/06/vue/eslint%E9%85%8D%E7%BD%AE/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/blog/images/avatar.jpg">
      <meta itemprop="name" content="大春哥">
      <meta itemprop="description" content="IT">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Starry Night">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/blog/2020/07/06/vue/eslint%E9%85%8D%E7%BD%AE/" class="post-title-link" itemprop="url">vue/eslint配置</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-07-06 23:13:42" itemprop="dateCreated datePublished" datetime="2020-07-06T23:13:42+08:00">2020-07-06</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-07-24 15:59:14" itemprop="dateModified" datetime="2020-07-24T15:59:14+08:00">2020-07-24</time>
              </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="esLint的基本配置"><a href="#esLint的基本配置" class="headerlink" title="esLint的基本配置"></a>esLint的基本配置</h1><ol>
<li>安装Eslint  /  vetur / prettier-code fromatter 三个vscode 插件 </li>
<li>在setting.json中 添加： </li>
</ol>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"editor.codeActionsOnSave"</span>: &#123;</span><br><span class="line">    <span class="attr">"source.fixAll"</span>: <span class="literal">true</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"[vue]"</span>: &#123;</span><br><span class="line">    <span class="attr">"editor.defaultFormatter"</span>: <span class="string">"esbenp.prettier-vscode"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"prettier.semi"</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="attr">"prettier.singleQuote"</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">"eslint.validate"</span>: [</span><br><span class="line">    <span class="string">"javascript"</span>,</span><br><span class="line">    <span class="string">"javascriptreact"</span>,</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="attr">"language"</span>: <span class="string">"vue"</span>,</span><br><span class="line">      <span class="attr">"autoFix"</span>: <span class="literal">true</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="string">"vue"</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">"eslint.autoFixOnSave"</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">"javascript.format.insertSpaceBeforeFunctionParenthesis"</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">"vetur.validation.script"</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="attr">"[vue]"</span>: &#123;</span><br><span class="line">    <span class="attr">"editor.defaultFormatter"</span>: <span class="string">"octref.vetur"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"vetur.format.defaultFormatter.html"</span>: <span class="string">"js-beautify-html"</span>,</span><br><span class="line">  <span class="attr">"vetur.format.defaultFormatterOptions"</span>: &#123;</span><br><span class="line">    <span class="attr">"prettier"</span>: &#123;</span><br><span class="line">      <span class="attr">"semi"</span>: <span class="literal">false</span>,</span><br><span class="line">      <span class="attr">"singleQuote"</span>: <span class="literal">true</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"javascript.format.insertSpaceBeforeFunctionParenthesis"</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">"vetur.format.defaultFormatter.js"</span>: <span class="string">"vscode-typescript"</span>,</span><br><span class="line">  <span class="attr">"[jsonc]"</span>: &#123;</span><br><span class="line">    <span class="attr">"editor.defaultFormatter"</span>: <span class="string">"esbenp.prettier-vscode"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"window.zoomLevel"</span>: <span class="number">1</span>,</span><br><span class="line">  <span class="attr">"[javascript]"</span>: &#123;</span><br><span class="line">    <span class="attr">"editor.defaultFormatter"</span>: <span class="string">"esbenp.prettier-vscode"</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="eslint-配置-说明："><a href="#eslint-配置-说明：" class="headerlink" title="eslint 配置 说明："></a>eslint 配置 说明：</h2><p>安装<br>    1. 可以全局安装，也可以在项目下面安装。 如下是在项目中安装示例，只需要在 package.json 中添加如下配置，并进行安装： &gt;”eslint”: “^4.11.0”</p>
<p>配置:</p>
<pre><code> 2. 配置方式有两种，但建议使用文件配置的形式，比较独立，便于维护。 使用文件配置的方式：在项目的根目录下，新建一个名为 .eslintrc 的文件，在此文件中添加一些检查规则。
文件配置方式
env：你的脚本将要运行在什么环境中
Environment可以预设好的其他环境的全局变量，如brower、node环境变量、es6环境变量、mocha环境变量等</code></pre><p>‘env’: {<br>    ‘browser’: true,<br>    ‘commonjs’: true,<br>    ‘es6’: true<br>  },</p>
<p>globals：额外的全局变量</p>
<p>globals: {<br>    vue: true,<br>    wx: true<br>  },</p>
<p>rules：开启规则和发生错误时报告的等级</p>
<h3 id="规则的错误等级有三种："><a href="#规则的错误等级有三种：" class="headerlink" title="规则的错误等级有三种："></a>规则的错误等级有三种：</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">0或’off’：关闭规则。</span><br><span class="line">1或’warn’：打开规则，并且作为一个警告（并不会导致检查不通过）。</span><br><span class="line">2或’error’：打开规则，并且作为一个错误 (退出码为1，检查不通过)。</span><br><span class="line"></span><br><span class="line">参数说明：</span><br><span class="line">参数1 ： 错误等级</span><br><span class="line">参数2 ： 处理方式</span><br><span class="line"></span><br><span class="line">配置代码注释方式</span><br><span class="line">有时我们可能要在代码中忽略eslint的某种检查，或者加入某种特定检查，此时我们可以用如下的方式：</span><br><span class="line"></span><br><span class="line">示例：</span><br><span class="line"></span><br><span class="line">忽略 no-undef 检查</span><br><span class="line">&#x2F;* eslint-disable no-undef *&#x2F;</span><br><span class="line"></span><br><span class="line">忽略 no-new 检查</span><br><span class="line">&#x2F;* eslint-disable no-new *&#x2F;</span><br><span class="line"></span><br><span class="line">设置检查</span><br><span class="line">&#x2F;eslint eqeqeq: off&#x2F; &#x2F;eslint eqeqeq: 0&#x2F;</span><br><span class="line"></span><br><span class="line">eslint 检查指令</span><br><span class="line">检查且修复</span><br><span class="line">eslint * --fix</span><br><span class="line"></span><br><span class="line">检查指定文件</span><br><span class="line">eslint app.js --fix</span><br></pre></td></tr></table></figure>



<h3 id="规则说明："><a href="#规则说明：" class="headerlink" title="规则说明："></a>规则说明：</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"no-alert"</span>: <span class="number">0</span>,<span class="comment">//禁止使用alert confirm prompt</span></span><br><span class="line"><span class="string">"no-array-constructor"</span>: <span class="number">2</span>,<span class="comment">//禁止使用数组构造器</span></span><br><span class="line"><span class="string">"no-bitwise"</span>: <span class="number">0</span>,<span class="comment">//禁止使用按位运算符</span></span><br><span class="line"><span class="string">"no-caller"</span>: <span class="number">1</span>,<span class="comment">//禁止使用arguments.caller或arguments.callee</span></span><br><span class="line"><span class="string">"no-catch-shadow"</span>: <span class="number">2</span>,<span class="comment">//禁止catch子句参数与外部作用域变量同名</span></span><br><span class="line"><span class="string">"no-class-assign"</span>: <span class="number">2</span>,<span class="comment">//禁止给类赋值</span></span><br><span class="line"><span class="string">"no-cond-assign"</span>: <span class="number">2</span>,<span class="comment">//禁止在条件表达式中使用赋值语句</span></span><br><span class="line"><span class="string">"no-console"</span>: <span class="number">2</span>,<span class="comment">//禁止使用console</span></span><br><span class="line"><span class="string">"no-const-assign"</span>: <span class="number">2</span>,<span class="comment">//禁止修改const声明的变量</span></span><br><span class="line"><span class="string">"no-constant-condition"</span>: <span class="number">2</span>,<span class="comment">//禁止在条件中使用常量表达式 if(true) if(1)</span></span><br><span class="line"><span class="string">"no-continue"</span>: <span class="number">0</span>,<span class="comment">//禁止使用continue</span></span><br><span class="line"><span class="string">"no-control-regex"</span>: <span class="number">2</span>,<span class="comment">//禁止在正则表达式中使用控制字符</span></span><br><span class="line"><span class="string">"no-debugger"</span>: <span class="number">2</span>,<span class="comment">//禁止使用debugger</span></span><br><span class="line"><span class="string">"no-delete-var"</span>: <span class="number">2</span>,<span class="comment">//不能对var声明的变量使用delete操作符</span></span><br><span class="line"><span class="string">"no-div-regex"</span>: <span class="number">1</span>,<span class="comment">//不能使用看起来像除法的正则表达式/=foo/</span></span><br><span class="line"><span class="string">"no-dupe-keys"</span>: <span class="number">2</span>,<span class="comment">//在创建对象字面量时不允许键重复 &#123;a:1,a:1&#125;</span></span><br><span class="line"><span class="string">"no-dupe-args"</span>: <span class="number">2</span>,<span class="comment">//函数参数不能重复</span></span><br><span class="line"><span class="string">"no-duplicate-case"</span>: <span class="number">2</span>,<span class="comment">//switch中的case标签不能重复</span></span><br><span class="line"><span class="string">"no-else-return"</span>: <span class="number">2</span>,<span class="comment">//如果if语句里面有return,后面不能跟else语句</span></span><br><span class="line"><span class="string">"no-empty"</span>: <span class="number">2</span>,<span class="comment">//块语句中的内容不能为空</span></span><br><span class="line"><span class="string">"no-empty-character-class"</span>: <span class="number">2</span>,<span class="comment">//正则表达式中的[]内容不能为空</span></span><br><span class="line"><span class="string">"no-empty-label"</span>: <span class="number">2</span>,<span class="comment">//禁止使用空label</span></span><br><span class="line"><span class="string">"no-eq-null"</span>: <span class="number">2</span>,<span class="comment">//禁止对null使用==或!=运算符</span></span><br><span class="line"><span class="string">"no-eval"</span>: <span class="number">1</span>,<span class="comment">//禁止使用eval</span></span><br><span class="line"><span class="string">"no-ex-assign"</span>: <span class="number">2</span>,<span class="comment">//禁止给catch语句中的异常参数赋值</span></span><br><span class="line"><span class="string">"no-extend-native"</span>: <span class="number">2</span>,<span class="comment">//禁止扩展native对象</span></span><br><span class="line"><span class="string">"no-extra-bind"</span>: <span class="number">2</span>,<span class="comment">//禁止不必要的函数绑定</span></span><br><span class="line"><span class="string">"no-extra-boolean-cast"</span>: <span class="number">2</span>,<span class="comment">//禁止不必要的bool转换</span></span><br><span class="line"><span class="string">"no-extra-parens"</span>: <span class="number">2</span>,<span class="comment">//禁止非必要的括号</span></span><br><span class="line"><span class="string">"no-extra-semi"</span>: <span class="number">2</span>,<span class="comment">//禁止多余的冒号</span></span><br><span class="line"><span class="string">"no-fallthrough"</span>: <span class="number">1</span>,<span class="comment">//禁止switch穿透</span></span><br><span class="line"><span class="string">"no-floating-decimal"</span>: <span class="number">2</span>,<span class="comment">//禁止省略浮点数中的0 .5 3.</span></span><br><span class="line"><span class="string">"no-func-assign"</span>: <span class="number">2</span>,<span class="comment">//禁止重复的函数声明</span></span><br><span class="line"><span class="string">"no-implicit-coercion"</span>: <span class="number">1</span>,<span class="comment">//禁止隐式转换</span></span><br><span class="line"><span class="string">"no-implied-eval"</span>: <span class="number">2</span>,<span class="comment">//禁止使用隐式eval</span></span><br><span class="line"><span class="string">"no-inline-comments"</span>: <span class="number">0</span>,<span class="comment">//禁止行内备注</span></span><br><span class="line"><span class="string">"no-inner-declarations"</span>: [<span class="number">2</span>, <span class="string">"functions"</span>],<span class="comment">//禁止在块语句中使用声明（变量或函数）</span></span><br><span class="line"><span class="string">"no-invalid-regexp"</span>: <span class="number">2</span>,<span class="comment">//禁止无效的正则表达式</span></span><br><span class="line"><span class="string">"no-invalid-this"</span>: <span class="number">2</span>,<span class="comment">//禁止无效的this，只能用在构造器，类，对象字面量</span></span><br><span class="line"><span class="string">"no-irregular-whitespace"</span>: <span class="number">2</span>,<span class="comment">//不能有不规则的空格</span></span><br><span class="line"><span class="string">"no-iterator"</span>: <span class="number">2</span>,<span class="comment">//禁止使用iterator 属性</span></span><br><span class="line"><span class="string">"no-label-var"</span>: <span class="number">2</span>,<span class="comment">//label名不能与var声明的变量名相同</span></span><br><span class="line"><span class="string">"no-labels"</span>: <span class="number">2</span>,<span class="comment">//禁止标签声明</span></span><br><span class="line"><span class="string">"no-lone-blocks"</span>: <span class="number">2</span>,<span class="comment">//禁止不必要的嵌套块</span></span><br><span class="line"><span class="string">"no-lonely-if"</span>: <span class="number">2</span>,<span class="comment">//禁止else语句内只有if语句</span></span><br><span class="line"><span class="string">"no-loop-func"</span>: <span class="number">1</span>,<span class="comment">//禁止在循环中使用函数（如果没有引用外部变量不形成闭包就可以）</span></span><br><span class="line"><span class="string">"no-mixed-requires"</span>: [<span class="number">0</span>, <span class="literal">false</span>],<span class="comment">//声明时不能混用声明类型</span></span><br><span class="line"><span class="string">"no-mixed-spaces-and-tabs"</span>: [<span class="number">2</span>, <span class="literal">false</span>],<span class="comment">//禁止混用tab和空格</span></span><br><span class="line"><span class="string">"linebreak-style"</span>: [<span class="number">0</span>, <span class="string">"windows"</span>],<span class="comment">//换行风格</span></span><br><span class="line"><span class="string">"no-multi-spaces"</span>: <span class="number">1</span>,<span class="comment">//不能用多余的空格</span></span><br><span class="line"><span class="string">"no-multi-str"</span>: <span class="number">2</span>,<span class="comment">//字符串不能用\换行</span></span><br><span class="line"><span class="string">"no-multiple-empty-lines"</span>: [<span class="number">1</span>, &#123;<span class="string">"max"</span>: <span class="number">2</span>&#125;],<span class="comment">//空行最多不能超过2行</span></span><br><span class="line"><span class="string">"no-native-reassign"</span>: <span class="number">2</span>,<span class="comment">//不能重写native对象</span></span><br><span class="line"><span class="string">"no-negated-in-lhs"</span>: <span class="number">2</span>,<span class="comment">//in 操作符的左边不能有!</span></span><br><span class="line"><span class="string">"no-nested-ternary"</span>: <span class="number">0</span>,<span class="comment">//禁止使用嵌套的三目运算</span></span><br><span class="line"><span class="string">"no-new"</span>: <span class="number">1</span>,<span class="comment">//禁止在使用new构造一个实例后不赋值</span></span><br><span class="line"><span class="string">"no-new-func"</span>: <span class="number">1</span>,<span class="comment">//禁止使用new Function</span></span><br><span class="line"><span class="string">"no-new-object"</span>: <span class="number">2</span>,<span class="comment">//禁止使用new Object()</span></span><br><span class="line"><span class="string">"no-new-require"</span>: <span class="number">2</span>,<span class="comment">//禁止使用new require</span></span><br><span class="line"><span class="string">"no-new-wrappers"</span>: <span class="number">2</span>,<span class="comment">//禁止使用new创建包装实例，new String new Boolean new Number</span></span><br><span class="line"><span class="string">"no-obj-calls"</span>: <span class="number">2</span>,<span class="comment">//不能调用内置的全局对象，比如Math() JSON()</span></span><br><span class="line"><span class="string">"no-octal"</span>: <span class="number">2</span>,<span class="comment">//禁止使用八进制数字</span></span><br><span class="line"><span class="string">"no-octal-escape"</span>: <span class="number">2</span>,<span class="comment">//禁止使用八进制转义序列</span></span><br><span class="line"><span class="string">"no-param-reassign"</span>: <span class="number">2</span>,<span class="comment">//禁止给参数重新赋值</span></span><br><span class="line"><span class="string">"no-path-concat"</span>: <span class="number">0</span>,<span class="comment">//node中不能使用dirname或filename做路径拼接</span></span><br><span class="line"><span class="string">"no-plusplus"</span>: <span class="number">0</span>,<span class="comment">//禁止使用++，--</span></span><br><span class="line"><span class="string">"no-process-env"</span>: <span class="number">0</span>,<span class="comment">//禁止使用process.env</span></span><br><span class="line"><span class="string">"no-process-exit"</span>: <span class="number">0</span>,<span class="comment">//禁止使用process.exit()</span></span><br><span class="line"><span class="string">"no-proto"</span>: <span class="number">2</span>,<span class="comment">//禁止使用proto属性</span></span><br><span class="line"><span class="string">"no-redeclare"</span>: <span class="number">2</span>,<span class="comment">//禁止重复声明变量</span></span><br><span class="line"><span class="string">"no-regex-spaces"</span>: <span class="number">2</span>,<span class="comment">//禁止在正则表达式字面量中使用多个空格 /foo bar/</span></span><br><span class="line"><span class="string">"no-restricted-modules"</span>: <span class="number">0</span>,<span class="comment">//如果禁用了指定模块，使用就会报错</span></span><br><span class="line"><span class="string">"no-return-assign"</span>: <span class="number">1</span>,<span class="comment">//return 语句中不能有赋值表达式</span></span><br><span class="line"><span class="string">"no-script-url"</span>: <span class="number">0</span>,<span class="comment">//禁止使用javascript:void(0)</span></span><br><span class="line"><span class="string">"no-self-compare"</span>: <span class="number">2</span>,<span class="comment">//不能比较自身</span></span><br><span class="line"><span class="string">"no-sequences"</span>: <span class="number">0</span>,<span class="comment">//禁止使用逗号运算符</span></span><br><span class="line"><span class="string">"no-shadow"</span>: <span class="number">2</span>,<span class="comment">//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名</span></span><br><span class="line"><span class="string">"no-shadow-restricted-names"</span>: <span class="number">2</span>,<span class="comment">//严格模式中规定的限制标识符不能作为声明时的变量名使用</span></span><br><span class="line"><span class="string">"no-spaced-func"</span>: <span class="number">2</span>,<span class="comment">//函数调用时 函数名与()之间不能有空格</span></span><br><span class="line"><span class="string">"no-sparse-arrays"</span>: <span class="number">2</span>,<span class="comment">//禁止稀疏数组， [1,,2]</span></span><br><span class="line"><span class="string">"no-sync"</span>: <span class="number">0</span>,<span class="comment">//nodejs 禁止同步方法</span></span><br><span class="line"><span class="string">"no-ternary"</span>: <span class="number">0</span>,<span class="comment">//禁止使用三目运算符</span></span><br><span class="line"><span class="string">"no-trailing-spaces"</span>: <span class="number">1</span>,<span class="comment">//一行结束后面不要有空格</span></span><br><span class="line"><span class="string">"no-this-before-super"</span>: <span class="number">0</span>,<span class="comment">//在调用super()之前不能使用this或super</span></span><br><span class="line"><span class="string">"no-throw-literal"</span>: <span class="number">2</span>,<span class="comment">//禁止抛出字面量错误 throw "error";</span></span><br><span class="line"><span class="string">"no-undef"</span>: <span class="number">1</span>,<span class="comment">//不能有未定义的变量</span></span><br><span class="line"><span class="string">"no-undef-init"</span>: <span class="number">2</span>,<span class="comment">//变量初始化时不能直接给它赋值为undefined</span></span><br><span class="line"><span class="string">"no-undefined"</span>: <span class="number">2</span>,<span class="comment">//不能使用undefined</span></span><br><span class="line"><span class="string">"no-unexpected-multiline"</span>: <span class="number">2</span>,<span class="comment">//避免多行表达式</span></span><br><span class="line"><span class="string">"no-underscore-dangle"</span>: <span class="number">1</span>,<span class="comment">//标识符不能以_开头或结尾</span></span><br><span class="line"><span class="string">"no-unneeded-ternary"</span>: <span class="number">2</span>,<span class="comment">//禁止不必要的嵌套 var isYes = answer === 1 ? true : false;</span></span><br><span class="line"><span class="string">"no-unreachable"</span>: <span class="number">2</span>,<span class="comment">//不能有无法执行的代码</span></span><br><span class="line"><span class="string">"no-unused-expressions"</span>: <span class="number">2</span>,<span class="comment">//禁止无用的表达式</span></span><br><span class="line"><span class="string">"no-unused-vars"</span>: [<span class="number">2</span>, &#123;<span class="string">"vars"</span>: <span class="string">"all"</span>, <span class="string">"args"</span>: <span class="string">"after-used"</span>&#125;],<span class="comment">//不能有声明后未被使用的变量或参数</span></span><br><span class="line"><span class="string">"no-use-before-define"</span>: <span class="number">2</span>,<span class="comment">//未定义前不能使用</span></span><br><span class="line"><span class="string">"no-useless-call"</span>: <span class="number">2</span>,<span class="comment">//禁止不必要的call和apply</span></span><br><span class="line"><span class="string">"no-void"</span>: <span class="number">2</span>,<span class="comment">//禁用void操作符</span></span><br><span class="line"><span class="string">"no-var"</span>: <span class="number">0</span>,<span class="comment">//禁用var，用let和const代替</span></span><br><span class="line"><span class="string">"no-warning-comments"</span>: [<span class="number">1</span>, &#123; <span class="string">"terms"</span>: [<span class="string">"todo"</span>, <span class="string">"fixme"</span>, <span class="string">"xxx"</span>], <span class="string">"location"</span>: <span class="string">"start"</span> &#125;],<span class="comment">//不能有警告备注</span></span><br><span class="line"><span class="string">"no-with"</span>: <span class="number">2</span>,<span class="comment">//禁用with</span></span><br><span class="line"></span><br><span class="line"><span class="string">"array-bracket-spacing"</span>: [<span class="number">2</span>, <span class="string">"never"</span>],<span class="comment">//是否允许非空数组里面有多余的空格</span></span><br><span class="line"><span class="string">"arrow-parens"</span>: <span class="number">0</span>,<span class="comment">//箭头函数用小括号括起来</span></span><br><span class="line"><span class="string">"arrow-spacing"</span>: <span class="number">0</span>,<span class="comment">//=&gt;的前/后括号</span></span><br><span class="line"><span class="string">"accessor-pairs"</span>: <span class="number">0</span>,<span class="comment">//在对象中使用getter/setter</span></span><br><span class="line"><span class="string">"block-scoped-var"</span>: <span class="number">0</span>,<span class="comment">//块语句中使用var</span></span><br><span class="line"><span class="string">"brace-style"</span>: [<span class="number">1</span>, <span class="string">"1tbs"</span>],<span class="comment">//大括号风格</span></span><br><span class="line"><span class="string">"callback-return"</span>: <span class="number">1</span>,<span class="comment">//避免多次调用回调什么的</span></span><br><span class="line"><span class="string">"camelcase"</span>: <span class="number">2</span>,<span class="comment">//强制驼峰法命名</span></span><br><span class="line"><span class="string">"comma-dangle"</span>: [<span class="number">2</span>, <span class="string">"never"</span>],<span class="comment">//对象字面量项尾不能有逗号</span></span><br><span class="line"><span class="string">"comma-spacing"</span>: <span class="number">0</span>,<span class="comment">//逗号前后的空格</span></span><br><span class="line"><span class="string">"comma-style"</span>: [<span class="number">2</span>, <span class="string">"last"</span>],<span class="comment">//逗号风格，换行时在行首还是行尾</span></span><br><span class="line"><span class="string">"complexity"</span>: [<span class="number">0</span>, <span class="number">11</span>],<span class="comment">//循环复杂度</span></span><br><span class="line"><span class="string">"computed-property-spacing"</span>: [<span class="number">0</span>, <span class="string">"never"</span>],<span class="comment">//是否允许计算后的键名什么的</span></span><br><span class="line"><span class="string">"consistent-return"</span>: <span class="number">0</span>,<span class="comment">//return 后面是否允许省略</span></span><br><span class="line"><span class="string">"consistent-this"</span>: [<span class="number">2</span>, <span class="string">"that"</span>],<span class="comment">//this别名</span></span><br><span class="line"><span class="string">"constructor-super"</span>: <span class="number">0</span>,<span class="comment">//非派生类不能调用super，派生类必须调用super</span></span><br><span class="line"><span class="string">"curly"</span>: [<span class="number">2</span>, <span class="string">"all"</span>],<span class="comment">//必须使用 if()&#123;&#125; 中的&#123;&#125;</span></span><br><span class="line"><span class="string">"default-case"</span>: <span class="number">2</span>,<span class="comment">//switch语句最后必须有default</span></span><br><span class="line"><span class="string">"dot-location"</span>: <span class="number">0</span>,<span class="comment">//对象访问符的位置，换行的时候在行首还是行尾</span></span><br><span class="line"><span class="string">"dot-notation"</span>: [<span class="number">0</span>, &#123; <span class="string">"allowKeywords"</span>: <span class="literal">true</span> &#125;],<span class="comment">//避免不必要的方括号</span></span><br><span class="line"><span class="string">"eol-last"</span>: <span class="number">0</span>,<span class="comment">//文件以单一的换行符结束</span></span><br><span class="line"><span class="string">"eqeqeq"</span>: <span class="number">2</span>,<span class="comment">//必须使用全等</span></span><br><span class="line"><span class="string">"func-names"</span>: <span class="number">0</span>,<span class="comment">//函数表达式必须有名字</span></span><br><span class="line"><span class="string">"func-style"</span>: [<span class="number">0</span>, <span class="string">"declaration"</span>],<span class="comment">//函数风格，规定只能使用函数声明/函数表达式</span></span><br><span class="line"><span class="string">"generator-star-spacing"</span>: <span class="number">0</span>,<span class="comment">//生成器函数*的前后空格</span></span><br><span class="line"><span class="string">"guard-for-in"</span>: <span class="number">0</span>,<span class="comment">//for in循环要用if语句过滤</span></span><br><span class="line"><span class="string">"handle-callback-err"</span>: <span class="number">0</span>,<span class="comment">//nodejs 处理错误</span></span><br><span class="line"><span class="string">"id-length"</span>: <span class="number">0</span>,<span class="comment">//变量名长度</span></span><br><span class="line"><span class="string">"indent"</span>: [<span class="number">2</span>, <span class="number">4</span>],<span class="comment">//缩进风格</span></span><br><span class="line"><span class="string">"init-declarations"</span>: <span class="number">0</span>,<span class="comment">//声明时必须赋初值</span></span><br><span class="line"><span class="string">"key-spacing"</span>: [<span class="number">0</span>, &#123; <span class="string">"beforeColon"</span>: <span class="literal">false</span>, <span class="string">"afterColon"</span>: <span class="literal">true</span> &#125;],<span class="comment">//对象字面量中冒号的前后空格</span></span><br><span class="line"><span class="string">"lines-around-comment"</span>: <span class="number">0</span>,<span class="comment">//行前/行后备注</span></span><br><span class="line"><span class="string">"max-depth"</span>: [<span class="number">0</span>, <span class="number">4</span>],<span class="comment">//嵌套块深度</span></span><br><span class="line"><span class="string">"max-len"</span>: [<span class="number">0</span>, <span class="number">80</span>, <span class="number">4</span>],<span class="comment">//字符串最大长度</span></span><br><span class="line"><span class="string">"max-nested-callbacks"</span>: [<span class="number">0</span>, <span class="number">2</span>],<span class="comment">//回调嵌套深度</span></span><br><span class="line"><span class="string">"max-params"</span>: [<span class="number">0</span>, <span class="number">3</span>],<span class="comment">//函数最多只能有3个参数</span></span><br><span class="line"><span class="string">"max-statements"</span>: [<span class="number">0</span>, <span class="number">10</span>],<span class="comment">//函数内最多有几个声明</span></span><br><span class="line"><span class="string">"new-cap"</span>: <span class="number">2</span>,<span class="comment">//函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用</span></span><br><span class="line"><span class="string">"new-parens"</span>: <span class="number">2</span>,<span class="comment">//new时必须加小括号</span></span><br><span class="line"><span class="string">"newline-after-var"</span>: <span class="number">2</span>,<span class="comment">//变量声明后是否需要空一行</span></span><br><span class="line"><span class="string">"object-curly-spacing"</span>: [<span class="number">0</span>, <span class="string">"never"</span>],<span class="comment">//大括号内是否允许不必要的空格</span></span><br><span class="line"><span class="string">"object-shorthand"</span>: <span class="number">0</span>,<span class="comment">//强制对象字面量缩写语法</span></span><br><span class="line"><span class="string">"one-var"</span>: <span class="number">1</span>,<span class="comment">//连续声明</span></span><br><span class="line"><span class="string">"operator-assignment"</span>: [<span class="number">0</span>, <span class="string">"always"</span>],<span class="comment">//赋值运算符 += -=什么的</span></span><br><span class="line"><span class="string">"operator-linebreak"</span>: [<span class="number">2</span>, <span class="string">"after"</span>],<span class="comment">//换行时运算符在行尾还是行首</span></span><br><span class="line"><span class="string">"padded-blocks"</span>: <span class="number">0</span>,<span class="comment">//块语句内行首行尾是否要空行</span></span><br><span class="line"><span class="string">"prefer-const"</span>: <span class="number">0</span>,<span class="comment">//首选const</span></span><br><span class="line"><span class="string">"prefer-spread"</span>: <span class="number">0</span>,<span class="comment">//首选展开运算</span></span><br><span class="line"><span class="string">"prefer-reflect"</span>: <span class="number">0</span>,<span class="comment">//首选Reflect的方法</span></span><br><span class="line"><span class="string">"quotes"</span>: [<span class="number">1</span>, <span class="string">"single"</span>],<span class="comment">//引号类型 `` "" ''</span></span><br><span class="line"><span class="string">"quote-props"</span>:[<span class="number">2</span>, <span class="string">"always"</span>],<span class="comment">//对象字面量中的属性名是否强制双引号</span></span><br><span class="line"><span class="string">"radix"</span>: <span class="number">2</span>,<span class="comment">//parseInt必须指定第二个参数</span></span><br><span class="line"><span class="string">"id-match"</span>: <span class="number">0</span>,<span class="comment">//命名检测</span></span><br><span class="line"><span class="string">"require-yield"</span>: <span class="number">0</span>,<span class="comment">//生成器函数必须有yield</span></span><br><span class="line"><span class="string">"semi"</span>: [<span class="number">2</span>, <span class="string">"always"</span>],<span class="comment">//语句强制分号结尾</span></span><br><span class="line"><span class="string">"semi-spacing"</span>: [<span class="number">0</span>, &#123;<span class="string">"before"</span>: <span class="literal">false</span>, <span class="string">"after"</span>: <span class="literal">true</span>&#125;],<span class="comment">//分号前后空格</span></span><br><span class="line"><span class="string">"sort-vars"</span>: <span class="number">0</span>,<span class="comment">//变量声明时排序</span></span><br><span class="line"><span class="string">"space-after-keywords"</span>: [<span class="number">0</span>, <span class="string">"always"</span>],<span class="comment">//关键字后面是否要空一格</span></span><br><span class="line"><span class="string">"space-before-blocks"</span>: [<span class="number">0</span>, <span class="string">"always"</span>],<span class="comment">//不以新行开始的块&#123;前面要不要有空格</span></span><br><span class="line"><span class="string">"space-before-function-paren"</span>: [<span class="number">0</span>, <span class="string">"always"</span>],<span class="comment">//函数定义时括号前面要不要有空格</span></span><br><span class="line"><span class="string">"space-in-parens"</span>: [<span class="number">0</span>, <span class="string">"never"</span>],<span class="comment">//小括号里面要不要有空格</span></span><br><span class="line"><span class="string">"space-infix-ops"</span>: <span class="number">0</span>,<span class="comment">//中缀操作符周围要不要有空格</span></span><br><span class="line"><span class="string">"space-return-throw-case"</span>: <span class="number">2</span>,<span class="comment">//return throw case后面要不要加空格</span></span><br><span class="line"><span class="string">"space-unary-ops"</span>: [<span class="number">0</span>, &#123; <span class="string">"words"</span>: <span class="literal">true</span>, <span class="string">"nonwords"</span>: <span class="literal">false</span> &#125;],<span class="comment">//一元运算符的前/后要不要加空格</span></span><br><span class="line"><span class="string">"spaced-comment"</span>: <span class="number">0</span>,<span class="comment">//注释风格要不要有空格什么的</span></span><br><span class="line"><span class="string">"strict"</span>: <span class="number">2</span>,<span class="comment">//使用严格模式</span></span><br><span class="line"><span class="string">"use-isnan"</span>: <span class="number">2</span>,<span class="comment">//禁止比较时使用NaN，只能用isNaN()</span></span><br><span class="line"><span class="string">"valid-jsdoc"</span>: <span class="number">0</span>,<span class="comment">//jsdoc规则</span></span><br><span class="line"><span class="string">"valid-typeof"</span>: <span class="number">2</span>,<span class="comment">//必须使用合法的typeof的值</span></span><br><span class="line"><span class="string">"vars-on-top"</span>: <span class="number">2</span>,<span class="comment">//var必须放在作用域顶部</span></span><br><span class="line"><span class="string">"wrap-iife"</span>: [<span class="number">2</span>, <span class="string">"inside"</span>],<span class="comment">//立即执行函数表达式的小括号风格</span></span><br><span class="line"><span class="string">"wrap-regex"</span>: <span class="number">0</span>,<span class="comment">//正则表达式字面量用小括号包起来</span></span><br><span class="line"><span class="string">"yoda"</span>: [<span class="number">2</span>, <span class="string">"never"</span>]<span class="comment">//禁止尤达条件</span></span><br></pre></td></tr></table></figure>











      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://dttx123.gitee.io/2018/10/10/vue/vue%E5%BC%80%E5%8F%91rem%E8%AE%BE%E7%BD%AE/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/blog/images/avatar.jpg">
      <meta itemprop="name" content="大春哥">
      <meta itemprop="description" content="IT">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Starry Night">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/blog/2018/10/10/vue/vue%E5%BC%80%E5%8F%91rem%E8%AE%BE%E7%BD%AE/" class="post-title-link" itemprop="url">vue-rem</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2018-10-10 00:00:00" itemprop="dateCreated datePublished" datetime="2018-10-10T00:00:00+08:00">2018-10-10</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-05-13 21:21:19" itemprop="dateModified" datetime="2020-05-13T21:21:19+08:00">2020-05-13</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/vue/" itemprop="url" rel="index"><span itemprop="name">vue</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h2 id="rem-布局"><a href="#rem-布局" class="headerlink" title="rem 布局"></a>rem 布局</h2><p> <a href="https://www.cnblogs.com/lml2017/p/9953429.html" target="_blank" rel="noopener">https://www.cnblogs.com/lml2017/p/9953429.html</a> </p>
<ol>
<li><p>安装插件</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add lib-flexible</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>在 public 中的 index.html 中删除 meta 标签</strong></p>
<p>flexible会为页面根据屏幕自动添加<code>&lt;meta name=&#39;viewport&#39; &gt;</code>标签，动态控制<code>initial-scale，maximum-scale，minimum-scale</code>等属性的值。</p>
</li>
<li><p>在 src / main.js 中导入插件包</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入 rem 的 js, 动态的设置了, 不同屏幕的html根元素的 font-size</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">'lib-flexible'</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>安装包</p>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add postcss-px2rem</span><br></pre></td></tr></table></figure>

<ol start="5">
<li>配置 vue.config.js</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  devServer: &#123;</span><br><span class="line">    open: <span class="literal">true</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// rem 的配置  button 20px 10px</span></span><br><span class="line">  css: &#123;</span><br><span class="line">    loaderOptions: &#123;</span><br><span class="line">      css: &#123;&#125;,</span><br><span class="line">      postcss: &#123;</span><br><span class="line">        plugins: [</span><br><span class="line">          <span class="built_in">require</span>(<span class="string">'postcss-px2rem'</span>)(&#123;</span><br><span class="line">            <span class="comment">// 其实就是设计图的 rootFontSize</span></span><br><span class="line">            <span class="comment">// 这里推荐写37.5</span></span><br><span class="line">            <span class="comment">// 考虑到如果使用了第三方的ui库，会有问题。</span></span><br><span class="line">            <span class="comment">// 量设计图的时候，把设计图缩小一倍</span></span><br><span class="line">            remUnit: <span class="number">36</span></span><br><span class="line">          &#125;)</span><br><span class="line">        ]</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h1 id="项目打包上线"><a href="#项目打包上线" class="headerlink" title="项目打包上线"></a>项目打包上线</h1><h2 id="使用CDN"><a href="#使用CDN" class="headerlink" title="使用CDN"></a>使用CDN</h2><p>把我们需要使用的一些第三方包，不打包了，只打包自己项目的内容</p>
<p>如果是第三方的包，直接引入cdn的地址</p>
<ul>
<li><a href="https://www.bootcdn.cn/" target="_blank" rel="noopener">开源项目 CDN 加速服务</a></li>
<li>1 在 <code>index.html</code> 中引入CDN提供的JS文件</li>
<li>2 在 <code>vue.config.js</code> 中添加配置 externals</li>
<li><strong>注意</strong>：通过CDN引入 element-ui 的样式文件后，就不需要在 main.js 中导入 element-ui 的CSS文件了。所以，直接注释掉 main.js 中的导入 element-ui 样式即可</li>
<li><code>externals</code>配置：</li>
</ul>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">configureWebpack: &#123;</span><br><span class="line">    externals: &#123;</span><br><span class="line">        vue: "Vue",</span><br><span class="line">        vuex: "Vuex",</span><br><span class="line">        "vue-router": "VueRouter",</span><br><span class="line">        "element-ui": "ELEMENT"</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="按需加载"><a href="#按需加载" class="headerlink" title="按需加载"></a>按需加载</h2><ul>
<li>修改 <code>router/index.js</code> 中导入组件的语法</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 使用：</span></span><br><span class="line"><span class="keyword">const</span> Home = <span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">import</span>(<span class="string">'@/components/home/Home'</span>)</span><br><span class="line"><span class="comment">// 替换：</span></span><br><span class="line"><span class="comment">// import Home from '@/components/home/Home'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 给打包生产的JS文件起名字</span></span><br><span class="line"><span class="keyword">const</span> Home = <span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">import</span>(<span class="comment">/* webpackChunkName: 'home' */</span> <span class="string">'@/components/home/Home'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// chunkName相同，将 goods 和 goods-add 两个组件，打包到一起</span></span><br><span class="line"><span class="keyword">const</span> Goods = <span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">import</span>(<span class="comment">/* webpackChunkName: 'goods' */</span><span class="string">'@/components/goods'</span>)</span><br><span class="line"><span class="keyword">const</span> GoodsAdd = <span class="function"><span class="params">()</span> =&gt;</span> <span class="keyword">import</span>(<span class="comment">/* webpackChunkName: 'goods' */</span><span class="string">'@/components/goods-add'</span>)</span><br></pre></td></tr></table></figure>

      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://dttx123.gitee.io/2018/10/01/vue/vuex/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/blog/images/avatar.jpg">
      <meta itemprop="name" content="大春哥">
      <meta itemprop="description" content="IT">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Starry Night">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/blog/2018/10/01/vue/vuex/" class="post-title-link" itemprop="url">vuex基础</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2018-10-01 00:00:00" itemprop="dateCreated datePublished" datetime="2018-10-01T00:00:00+08:00">2018-10-01</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-05-13 23:26:50" itemprop="dateModified" datetime="2020-05-13T23:26:50+08:00">2020-05-13</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/vue/" itemprop="url" rel="index"><span itemprop="name">vue</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="vuex基本介绍"><a href="#vuex基本介绍" class="headerlink" title="vuex基本介绍"></a>vuex基本介绍</h1><p><a href="https://vuex.vuejs.org/zh/guide/" target="_blank" rel="noopener">中文文档</a></p>
<h2 id="vuex基本概念"><a href="#vuex基本概念" class="headerlink" title="vuex基本概念"></a>vuex基本概念</h2><p>vuex是vue的状态管理工具，状态即数据。 状态管理就是管理vue中的数据</p>
<p>注意：</p>
<ul>
<li>不是所有的场景都适用于vuex，只有在必要的时候才使用vuex,如果不必要，尽量别用</li>
<li>使用了vuex之后，会附加更多的框架中的概念进来，增加了项目的复杂度</li>
</ul>
<h2 id="vuex的优点"><a href="#vuex的优点" class="headerlink" title="vuex的优点"></a>vuex的优点</h2><ul>
<li>vuex用于解决组件通讯的问题</li>
<li>vuex可以集中的管理vue项目中用到的所有数据</li>
</ul>
<h2 id="为什么要使用vuex"><a href="#为什么要使用vuex" class="headerlink" title="为什么要使用vuex"></a>为什么要使用vuex</h2><ul>
<li>在大型的项目中，组件通讯会变得很混乱，使用vuex可以统一管理组件之间的通讯</li>
</ul>
<h1 id="vuex使用"><a href="#vuex使用" class="headerlink" title="vuex使用"></a>vuex使用</h1><h2 id="store与state"><a href="#store与state" class="headerlink" title="store与state"></a>store与state</h2><ul>
<li>安装</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i vuex</span><br></pre></td></tr></table></figure>

<ul>
<li>引包</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 引包 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vue/dist/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./node_modules/vuex/dist/vuex.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>使用</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 使用vuex</span></span><br><span class="line"><span class="comment">// 1.创建Store，用于存储数据和操作数据</span></span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">  <span class="comment">//2. 指定state属性，用于提供数据</span></span><br><span class="line">  <span class="comment">// 状态，类似于data，用于提供数据</span></span><br><span class="line">  state: &#123;</span><br><span class="line">    count: <span class="number">1</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//3. 使用vuex中的数据</span></span><br><span class="line"><span class="built_in">console</span>.log(store.state.count)</span><br></pre></td></tr></table></figure>

<h2 id="mutations的使用"><a href="#mutations的使用" class="headerlink" title="mutations的使用"></a>mutations的使用</h2><ul>
<li>修改vuex中的数据，必须通过 mutations进行修改，不能直接修改 </li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 如果要修改state，需要在mutations的方法修改</span></span><br><span class="line">mutations: &#123;</span><br><span class="line">  <span class="comment">// 添加一个方法</span></span><br><span class="line">  <span class="comment">// state：表示state对象</span></span><br><span class="line">  add (state) &#123;</span><br><span class="line">    state.count++</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//触发mutations</span></span><br><span class="line"><span class="comment">// 想要修改state，必须触发mutations提供的方法</span></span><br><span class="line">store.commit(<span class="string">'add'</span>)</span><br></pre></td></tr></table></figure>

<ul>
<li>带参数（Payload）</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 定义mutations</span></span><br><span class="line"><span class="comment">// 如果要修改state，需要在mutations的方法修改</span></span><br><span class="line">mutations: &#123;</span><br><span class="line">  addNum (state, num) &#123;</span><br><span class="line">    state.count += num</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 提交mutations</span></span><br><span class="line">store.commit(<span class="string">'addNum'</span>, <span class="number">5</span>)</span><br></pre></td></tr></table></figure>

<ul>
<li>payload载荷应该是一个对象</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 定义mutations</span></span><br><span class="line"><span class="comment">// 如果要修改state，需要在mutations的方法修改</span></span><br><span class="line">mutations: &#123;</span><br><span class="line">  addNum (state, obj) &#123;</span><br><span class="line">    state.count += obj.num</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 提交mutations</span></span><br><span class="line">store.commit(<span class="string">'addNum'</span>, &#123;<span class="attr">num</span>: <span class="number">5</span>&#125;)</span><br></pre></td></tr></table></figure>

<h2 id="vuex配合vue使用"><a href="#vuex配合vue使用" class="headerlink" title="vuex配合vue使用"></a>vuex配合vue使用</h2><ul>
<li>定义store</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1. 创建store</span></span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">  state: &#123;</span><br><span class="line">    count: <span class="number">10</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ul>
<li>定义vue实例</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 2. 创建vue实例</span></span><br><span class="line"><span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">'#app'</span>,</span><br><span class="line">  <span class="comment">// 3. 将store与vue实例关联</span></span><br><span class="line">  store</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ul>
<li>关联store与vue实例</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 3. 将store与vue实例关联</span></span><br><span class="line">store：store</span><br></pre></td></tr></table></figure>

<ul>
<li>在vue实例中使用store的数据</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 4. 使用数据 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>直接使用vuex中的数据&#123;&#123;$store.state.count&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>



<ul>
<li>点击按钮，修改store中的数据</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 4. 使用数据 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>直接使用vuex中的数据&#123;&#123;$store.state.count&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"add"</span>&gt;</span>修改数据<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript"><span class="comment">// 1. 创建store</span></span></span><br><span class="line"><span class="actionscript">  <span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store(&#123;</span></span><br><span class="line">    state: &#123;</span><br><span class="line">      count: 0</span><br><span class="line">    &#125;,</span><br><span class="line">    mutations: &#123;</span><br><span class="line">      addCount (state) &#123;</span><br><span class="line">        state.count++</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  </span><br><span class="line"><span class="actionscript">  <span class="comment">// 2. 创建vue实例</span></span></span><br><span class="line"><span class="actionscript">  <span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">    el: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 3. 将store与vue实例关联</span></span></span><br><span class="line">    store,</span><br><span class="line">    methods: &#123;</span><br><span class="line">      add () &#123;</span><br><span class="line"><span class="actionscript">        <span class="keyword">this</span>.$store.commit(<span class="string">'addCount'</span>)</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>devtools中查看vuex</li>
</ul>
<h1 id="TodoMVC"><a href="#TodoMVC" class="headerlink" title="TodoMVC"></a>TodoMVC</h1><h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p><a href="http://todomvc.com/examples/vue/" target="_blank" rel="noopener">TodoMVC</a></p>
<h2 id="结构搭建"><a href="#结构搭建" class="headerlink" title="结构搭建"></a>结构搭建</h2><ul>
<li><a href="https://github.com/tastejs/todomvc-app-template/" target="_blank" rel="noopener">静态页面</a></li>
</ul>
<h2 id="组件划分"><a href="#组件划分" class="headerlink" title="组件划分"></a>组件划分</h2><ul>
<li>新建三个组件</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">Header.vue</span><br><span class="line">Main.vue</span><br><span class="line">Footer.vue</span><br><span class="line"></span><br><span class="line">为了演示组件之间的通讯</span><br></pre></td></tr></table></figure>

<h2 id="项目中使用vuex"><a href="#项目中使用vuex" class="headerlink" title="项目中使用vuex"></a>项目中使用vuex</h2><ul>
<li>安装</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i vuex</span><br></pre></td></tr></table></figure>

<ul>
<li>新建<code>store/index.js</code>，类似于router/index.js</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> Vuex <span class="keyword">from</span> <span class="string">'vuex'</span></span><br><span class="line">Vue.use(Vuex)</span><br><span class="line"></span><br><span class="line"><span class="comment">// state用于存储数据</span></span><br><span class="line"><span class="keyword">const</span> state = &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">  state</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ul>
<li>在main.js中导入</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">'./store'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">'#app'</span>,</span><br><span class="line">  components: &#123; App &#125;,</span><br><span class="line">  template: <span class="string">'&lt;App/&gt;'</span>,</span><br><span class="line">  store</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>





      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://dttx123.gitee.io/2018/09/11/webpack/webpack/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/blog/images/avatar.jpg">
      <meta itemprop="name" content="大春哥">
      <meta itemprop="description" content="IT">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Starry Night">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/blog/2018/09/11/webpack/webpack/" class="post-title-link" itemprop="url">webpack 基础</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2018-09-11 00:00:00" itemprop="dateCreated datePublished" datetime="2018-09-11T00:00:00+08:00">2018-09-11</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-07-20 13:14:01" itemprop="dateModified" datetime="2020-07-20T13:14:01+08:00">2020-07-20</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/webpack/" itemprop="url" rel="index"><span itemprop="name">webpack</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="webpack概述"><a href="#webpack概述" class="headerlink" title="webpack概述"></a>webpack概述</h1><blockquote>
<p><em>webpack</em> 是一个现代 JavaScript 应用程序的<em>静态模块打包器(module bundler</em> )</p>
</blockquote>
<p><a href="https://www.webpackjs.com/" target="_blank" rel="noopener">webpack中文网</a></p>
<p><a href="https://webpack.js.org/" target="_blank" rel="noopener">webpack官网</a></p>
<h2 id="webpack做了什么"><a href="#webpack做了什么" class="headerlink" title="webpack做了什么"></a>webpack做了什么</h2><ul>
<li>语法转换<ul>
<li>less/sass转换成css</li>
<li>ES6转换成ES5</li>
<li>typescript转换成js</li>
</ul>
</li>
<li>html/css/js代码的压缩与合并（打包）</li>
<li>webpack可以在开发期间提供一个开发环境<ul>
<li>自动开启浏览器</li>
<li>自动监视文件变化</li>
<li>自动刷新浏览器</li>
</ul>
</li>
<li>项目一般都需要经过webpack打包之后才上线。</li>
</ul>
<h2 id="webpack模块说明"><a href="#webpack模块说明" class="headerlink" title="webpack模块说明"></a>webpack模块说明</h2><p>webpack会把所有的资源都当成模块</p>
<ul>
<li>css</li>
<li>js</li>
<li>图片</li>
<li>字体图标</li>
</ul>
<p>webpack给前端开发提供了模块化的开发环境</p>
<ul>
<li>对于js文件，webpack中支持AMD、CMD、commonJS、ES6模块化等语法</li>
<li>有了webpack，我们可以在前端代码中使用任意的模块化语法</li>
<li>可以在浏览器中使用nodejs的模块化语法<code>const $ = require(&#39;jquery&#39;)</code></li>
</ul>
<h2 id="webpack使用步骤"><a href="#webpack使用步骤" class="headerlink" title="webpack使用步骤"></a>webpack使用步骤</h2><ul>
<li>项目初始化</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn init -y</span><br></pre></td></tr></table></figure>

<ul>
<li>安装</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add webpack webpack-cli -D</span><br></pre></td></tr></table></figure>

<ul>
<li>配置scripts</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"scripts"</span>: &#123;</span><br><span class="line">  <span class="string">"build"</span>: <span class="string">"webpack index.js -o ./dist/bundle.js"</span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<ul>
<li>使用命令</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn build  <span class="comment"># 就可以使用webpack进行打包了</span></span><br></pre></td></tr></table></figure>



<h2 id="配置文件-webpack-config-js"><a href="#配置文件-webpack-config-js" class="headerlink" title="配置文件-webpack.config.js"></a>配置文件-webpack.config.js</h2><blockquote>
<p>如果所有的参数都拼接到webpack-dev-server的后面，非常的麻烦，因此可以提供webpack.config.js来进行配置</p>
</blockquote>
<ul>
<li>在项目的根目录下面新建<code>webpack.config.js</code>文件</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">const path = require(<span class="string">'path'</span>)</span><br><span class="line">// 这是一个nodejs文件</span><br><span class="line">module.exports = &#123;</span><br><span class="line">  // 设置入口文件</span><br><span class="line">  entry: path.join(__dirname, <span class="string">'index.js'</span>),</span><br><span class="line">  // 设置出口</span><br><span class="line">  output: &#123;</span><br><span class="line">    // 设置输出目录</span><br><span class="line">    path: path.join(__dirname, <span class="string">'dist'</span>),</span><br><span class="line">    // 输出文件</span><br><span class="line">    filename: <span class="string">'bundle.js'</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>执行命令</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">webpack  &#x2F;&#x2F; webpack会自动读取当前目录下的配置文件</span><br></pre></td></tr></table></figure>

<ul>
<li>模式的配置</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 设置打包的模式</span></span><br><span class="line"><span class="comment">//'production'</span></span><br><span class="line"><span class="comment">//development  </span></span><br><span class="line">mode: <span class="string">'production'</span></span><br></pre></td></tr></table></figure>

<h2 id="隔行变色效果"><a href="#隔行变色效果" class="headerlink" title="隔行变色效果"></a>隔行变色效果</h2><h1 id="webpack-插件"><a href="#webpack-插件" class="headerlink" title="webpack-插件"></a>webpack-插件</h1><blockquote>
<p>webpack 有着丰富的插件接口(rich plugin interface)。webpack 自身的多数功能都使用这个插件接口。这个插件接口使 webpack 变得<strong>极其灵活</strong>。 </p>
</blockquote>
<ul>
<li>安装</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add  html-webpack-plugin -D</span><br></pre></td></tr></table></figure>

<ul>
<li><code>webpack.config.js</code>导入</li>
</ul>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var HtmlWebpackPlugin = require('html-webpack-plugin');</span><br></pre></td></tr></table></figure>

<ul>
<li>使用</li>
</ul>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">module.exports = &#123;</span><br><span class="line">    plugins: [</span><br><span class="line">        new HtmlWebpackPlugin(&#123;</span><br><span class="line">            template: path.join(__dirname, 'src', 'index.html')</span><br><span class="line">        &#125;)</span><br><span class="line">    ],</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h1 id="webpack-loaders"><a href="#webpack-loaders" class="headerlink" title="webpack-loaders"></a>webpack-loaders</h1><blockquote>
<p>webpack 可以使用 <a href="https://www.webpackjs.com/concepts/loaders" target="_blank" rel="noopener">loader</a> 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。 </p>
</blockquote>
<h2 id="css-loader处理css文件"><a href="#css-loader处理css文件" class="headerlink" title="css-loader处理css文件"></a>css-loader处理css文件</h2><ul>
<li>安装</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save-dev style-loader css-loader</span><br></pre></td></tr></table></figure>

<ul>
<li>配置</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>: &#123;</span><br><span class="line">  <span class="comment">// loader的规则</span></span><br><span class="line">  rules: [</span><br><span class="line">    &#123;</span><br><span class="line">      <span class="comment">// 正则表达式，用于匹配所有的css文件</span></span><br><span class="line">      test: <span class="regexp">/\.css$/</span>,</span><br><span class="line">      <span class="comment">// 使用什么样的loader进行解析</span></span><br><span class="line">      use: [ <span class="string">"style-loader"</span>, <span class="string">"css-loader"</span>]</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<h2 id="less-loader处理less文件"><a href="#less-loader处理less文件" class="headerlink" title="less-loader处理less文件"></a>less-loader处理less文件</h2><ul>
<li>安装</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save-dev less-loader less</span><br></pre></td></tr></table></figure>

<ul>
<li>配置</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="comment">// 匹配所有的less文件</span></span><br><span class="line">    test: <span class="regexp">/\.less$/</span>,</span><br><span class="line">        use: [ <span class="string">"style-loader"</span>, <span class="string">"css-loader"</span>, <span class="string">"less-loader"</span>]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="file-loader处理图片文件"><a href="#file-loader处理图片文件" class="headerlink" title="file-loader处理图片文件"></a>file-loader处理图片文件</h2><ul>
<li>安装</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save-dev file-loader</span><br></pre></td></tr></table></figure>

<ul>
<li>配置</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="comment">// 配置图片加载</span></span><br><span class="line">    test: <span class="regexp">/\.(png|jpg|gif)$/</span>,</span><br><span class="line">    use: <span class="string">"file-loader"</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="url-loader处理图片文件"><a href="#url-loader处理图片文件" class="headerlink" title="url-loader处理图片文件"></a>url-loader处理图片文件</h2><blockquote>
<p>url-loader与file-loader一样，也可以处理图片，但是url-loader可以以base64编码的方式处理图片</p>
</blockquote>
<ul>
<li>安装</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save-dev url-loader</span><br></pre></td></tr></table></figure>

<ul>
<li>配置</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    // 配置图片加载</span><br><span class="line">    <span class="built_in">test</span>: /\.(png|jpg|gif)$/,</span><br><span class="line">        use: [</span><br><span class="line">            &#123;</span><br><span class="line">                loader: <span class="string">'url-loader'</span></span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>base64的优点</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 精灵图的作用：减小网络请求</span><br><span class="line"><span class="number">2.</span> base64:减少网络请求  通过京东查看base64编码的图片</span><br></pre></td></tr></table></figure>

<ul>
<li>设置limit参数</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="comment">// 配置图片加载</span></span><br><span class="line">    test: <span class="regexp">/\.(png|jpg|gif)$/</span>,</span><br><span class="line">        use: [</span><br><span class="line">            &#123;</span><br><span class="line">                loader: <span class="string">'url-loader'</span>,</span><br><span class="line">                options: &#123;</span><br><span class="line">                    <span class="comment">// 限定文件大小，注意：如果文件超出了大小，会自动调用file-loader，所以安装url-loader通过都要安装file-loader</span></span><br><span class="line">                    limit: <span class="number">8192</span></span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="url-loader处理字体图标文件"><a href="#url-loader处理字体图标文件" class="headerlink" title="url-loader处理字体图标文件"></a>url-loader处理字体图标文件</h2><blockquote>
<p>处理字体图标文件与图片一模一样</p>
</blockquote>
<ul>
<li>配置</li>
</ul>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="comment">// 配置字体图标加载</span></span><br><span class="line">    test: /\.(woff|woff2|eot|ttf|otf|svg)$/,</span><br><span class="line">        use: [</span><br><span class="line">            &#123;</span><br><span class="line">                loader: 'url-loader',</span><br><span class="line">                options: &#123;</span><br><span class="line">                    <span class="comment">// 限定文件大小</span></span><br><span class="line">                    limit: 819200</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="babel处理高版本的ES语法"><a href="#babel处理高版本的ES语法" class="headerlink" title="babel处理高版本的ES语法"></a>babel处理高版本的ES语法</h2><h3 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h3><p>Babel 是一个 JavaScript 编译器。</p>
<p>今天就开始使用下一代 JavaScript 语法吧！</p>
<p><a href="http://babeljs.io/" target="_blank" rel="noopener">官网</a></p>
<p><a href="https://www.babeljs.cn/" target="_blank" rel="noopener">中文网</a></p>
<p>babel可以把最新版本的语法编译成浏览器能够兼容的代码（ES5）</p>
<h3 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h3><ul>
<li>安装</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -D babel-loader @babel/core @babel/preset-env</span><br></pre></td></tr></table></figure>

<ul>
<li>配置</li>
</ul>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    test: /\.js$/,</span><br><span class="line">    exclude: /(node_modules|bower_components)/,</span><br><span class="line">    use: &#123;</span><br><span class="line">        loader: 'babel-loader'</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h1 id="webpack-dev-server的使用"><a href="#webpack-dev-server的使用" class="headerlink" title="webpack-dev-server的使用"></a>webpack-dev-server的使用</h1><p>在开发期间，会用到webpack的一个辅助包：<code>webpack-dev-server</code>,</p>
<p><code>webpack-dev-server</code>的作用</p>
<ul>
<li><p>自动开启http服务</p>
</li>
<li><p>自动打开浏览器</p>
</li>
<li><p>自动监视文件的变化</p>
</li>
<li><p>引入，每次修改代码，都需要重新打包</p>
</li>
</ul>
<h2 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h2><ul>
<li>安装</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save-dev webpack-dev-server</span><br></pre></td></tr></table></figure>

<ul>
<li>配置</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack-dev-server提供了一个简单的服务器，并且能够实时重新加载</span></span><br><span class="line">devServer: &#123;</span><br><span class="line">  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>其他配置</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">devServer: &#123;</span><br><span class="line">   port: <span class="number">9999</span>,</span><br><span class="line">   open: <span class="literal">true</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="热更新的说明"><a href="#热更新的说明" class="headerlink" title="热更新的说明"></a>热更新的说明</h2><ul>
<li>开启</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hot: <span class="literal">true</span>  <span class="comment"># webpack在更新代码的时候不会刷新整个页面，仅仅是局部的更新</span></span><br></pre></td></tr></table></figure>

<ul>
<li>热更新与dev-server模式不会在生产环境下用，生产环境还是需要<code>npm run build</code></li>
</ul>
<h1 id="ES6模块化"><a href="#ES6模块化" class="headerlink" title="ES6模块化"></a>ES6模块化</h1><p>在之前的 javascript 中一直是没有模块系统的，前辈们为了解决这些问题，提出了各种规范, 最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。而 ES6 中提供了非常容易使用的模块系统，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。 </p>
<p>CommonJS: 服务器</p>
<p>AMD：浏览器 requirejs</p>
<p>CMD：浏览器  seajs</p>
<h2 id="基本使用-1"><a href="#基本使用-1" class="headerlink" title="基本使用"></a>基本使用</h2><blockquote>
<p>一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个 变量，就必须使用export关键字输出该变量。下面是一个JS文件，里面使用export命令输出变量。 </p>
</blockquote>
<p>es6 中新增了两个命令 <code>export</code> 和 <code>import</code> , <code>export</code> 命令用于规定模块的对外接口，<code>import</code> 命令用于输入其他模块提供的功能 </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// a.js</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> name = <span class="string">'hucc'</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> age = <span class="number">18</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> desc = <span class="string">'很帅'</span></span><br></pre></td></tr></table></figure>

<p>使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件） </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//main.js</span></span><br><span class="line"><span class="keyword">import</span> &#123;name, age, desc&#125; <span class="keyword">from</span> <span class="string">'./a.js'</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'从模块内部导出的内容:'</span>, name, age, desc)</span><br></pre></td></tr></table></figure>

<h2 id="export详解"><a href="#export详解" class="headerlink" title="export详解"></a>export详解</h2><p>上面介绍了模块化最基础的用法，export 不止可以导出函数，还可以导出对象，数组，字符串等等</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//a.js</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> name = <span class="string">'hucc'</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> obj = &#123;</span><br><span class="line">  name: <span class="string">'zs'</span>,</span><br><span class="line">  age: <span class="number">18</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p> export的写法，除了像上面这样，还有另外一种。 </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//a.js</span></span><br><span class="line"><span class="keyword">const</span> name = <span class="string">'hucc'</span></span><br><span class="line"><span class="keyword">const</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">  name: <span class="string">'zs'</span>,</span><br><span class="line">  age: <span class="number">18</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//	优点：上面代码在export命令后面，使用大括号指定所要输出的一组变量。它与前一种写法是等价的，但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。 </span></span><br><span class="line"><span class="keyword">export</span> &#123;name, arr, obj&#125;</span><br></pre></td></tr></table></figure>

<h2 id="默认导出"><a href="#默认导出" class="headerlink" title="默认导出"></a>默认导出</h2><p><code>export default</code> 指定默认输出, import 无需知道变量名就可以直接使用 </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//a.js</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">fn</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'哈哈'</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//main.js</span></span><br><span class="line"><span class="comment">//在导入时，可以随意的使用变量名来接收</span></span><br><span class="line"><span class="keyword">import</span> a <span class="keyword">from</span> <span class="string">'./a'</span></span><br><span class="line">a()</span><br></pre></td></tr></table></figure>

<p><strong>注意：export default是非常用的语法，用的很多, 以一些常用的模块为例</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> $ <span class="keyword">from</span> <span class="string">'jQuery'</span>   <span class="comment">// 加载jQuery 库</span></span><br><span class="line"><span class="keyword">import</span> _ <span class="keyword">from</span> <span class="string">'lodash'</span>   <span class="comment">// 加载 lodash</span></span><br><span class="line"><span class="keyword">import</span> moment <span class="keyword">from</span> <span class="string">'moment'</span> <span class="comment">// 加载 moment</span></span><br></pre></td></tr></table></figure>

<h2 id="import详解"><a href="#import详解" class="headerlink" title="import详解"></a>import详解</h2><p><code>import</code> 为加载模块的命令，基础使用方式和之前一样 </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//main.js</span></span><br><span class="line"><span class="keyword">import</span> &#123;name, arr, user&#125; <span class="keyword">from</span> <span class="string">'./a'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//如果是export default导出的内容</span></span><br><span class="line"><span class="keyword">import</span> a <span class="keyword">from</span> <span class="string">'./a'</span></span><br></pre></td></tr></table></figure>

<h2 id="兼容性说明"><a href="#兼容性说明" class="headerlink" title="兼容性说明"></a>兼容性说明</h2><p>上面介绍了，es6 中模块的使用方式，但是现在es6的模块化，无论在浏览器端还是 node.js 上都没有得到很好的支持，所以需要，一些转码的工具（babel）。使我们可以用es6的方式来编码，最后输出es5的代码。 </p>
<h2 id="webpack-config-js-示例"><a href="#webpack-config-js-示例" class="headerlink" title="webpack.config.js 示例"></a>webpack.config.js 示例</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack的配置文件,导出webpack的配置对象</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>)</span><br><span class="line"><span class="keyword">const</span> HtmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>)</span><br><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">'mini-css-extract-plugin'</span>);</span><br><span class="line"><span class="keyword">const</span> VueLoaderPlugin = <span class="built_in">require</span>(<span class="string">'vue-loader/lib/plugin'</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">  <span class="comment">// 配置webpack的入口</span></span><br><span class="line">  entry: <span class="string">'./src/main.js'</span>,</span><br><span class="line">  <span class="comment">// 配置webpack的出口</span></span><br><span class="line">  output: &#123;</span><br><span class="line">    <span class="comment">// webpack的出口所在的目录，默认是dist，如果需要提供，必须是绝对路径</span></span><br><span class="line">    path: path.join(__dirname, <span class="string">'dist'</span>),</span><br><span class="line">    <span class="comment">// 出口的文件</span></span><br><span class="line">    filename: <span class="string">'bundle.js'</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 打包模式</span></span><br><span class="line">  mode: <span class="string">'development'</span>,</span><br><span class="line">  plugins: [</span><br><span class="line">    <span class="keyword">new</span> HtmlWebpackPlugin(&#123;<span class="attr">template</span>: <span class="string">'./src/index.html'</span>&#125;),</span><br><span class="line">    <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">      <span class="comment">// 指定生成的css文件名和路径</span></span><br><span class="line">      filename: <span class="string">'./css/index.css'</span>,</span><br><span class="line">    &#125;),</span><br><span class="line">    <span class="keyword">new</span> VueLoaderPlugin()</span><br><span class="line">  ],</span><br><span class="line">  <span class="built_in">module</span>: &#123;</span><br><span class="line">    rules: [</span><br><span class="line">      <span class="comment">// 加载css的规则</span></span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.css$/</span>,</span><br><span class="line">        <span class="comment">// loader的加载顺序是从右往左加载</span></span><br><span class="line">        <span class="comment">// 把css-loader处理后的结果 不交给style-loader进行展示，交给MiniCssExtractPlugin这个插件</span></span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: MiniCssExtractPlugin.loader,</span><br><span class="line">            options: &#123;</span><br><span class="line">              <span class="comment">// 指定加载资源的路径</span></span><br><span class="line">              publicPath: <span class="string">'../'</span></span><br><span class="line">            &#125;</span><br><span class="line">          &#125;,</span><br><span class="line">          <span class="string">'css-loader'</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// 加载less的规则</span></span><br><span class="line">      &#123; </span><br><span class="line">        test: <span class="regexp">/\.less$/</span>,</span><br><span class="line">        use: [</span><br><span class="line">          &#123;</span><br><span class="line">            loader: MiniCssExtractPlugin.loader,</span><br><span class="line">            options: &#123;</span><br><span class="line">              <span class="comment">// 指定加载资源的路径</span></span><br><span class="line">              publicPath: <span class="string">'../'</span></span><br><span class="line">            &#125;</span><br><span class="line">          &#125; ,</span><br><span class="line">          <span class="string">'css-loader'</span>, </span><br><span class="line">          <span class="string">'less-loader'</span></span><br><span class="line">        ]</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// 加载图片的规则</span></span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(png|jpg|gif)$/</span>,</span><br><span class="line">        use: &#123;</span><br><span class="line">          loader: <span class="string">'url-loader'</span>,</span><br><span class="line">          options: &#123;</span><br><span class="line">            limit: <span class="number">10</span> * <span class="number">1024</span>,</span><br><span class="line">            <span class="comment">// 指定文件的生成的名字 使用原来的名字</span></span><br><span class="line">            name: <span class="string">'[name].[ext]'</span>,</span><br><span class="line">            <span class="comment">// 指定输出目录</span></span><br><span class="line">            outputPath: <span class="string">'./images'</span></span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// 加载字体图标的规则</span></span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(eot|ttf|svg|woff)$/</span>,</span><br><span class="line">        use: &#123;</span><br><span class="line">          loader: <span class="string">'url-loader'</span>,</span><br><span class="line">          options: &#123;</span><br><span class="line">            limit: <span class="number">10</span> * <span class="number">1024</span>,</span><br><span class="line">            name: <span class="string">'[name].[ext]'</span>,</span><br><span class="line">            outputPath: <span class="string">'./fonts'</span></span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// 加载音视频的规则</span></span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.(mp3|mp4|ogg)$/</span>,</span><br><span class="line">        use: &#123;</span><br><span class="line">          loader: <span class="string">'url-loader'</span>,</span><br><span class="line">          options: &#123;</span><br><span class="line">            limit: <span class="number">10</span> * <span class="number">1024</span></span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// 配置babel的loader</span></span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.js$/</span>,</span><br><span class="line">        <span class="comment">// babel不处理node_modules中的代码</span></span><br><span class="line">        exclude: <span class="regexp">/(node_modules)/</span>,</span><br><span class="line">        use: &#123;</span><br><span class="line">          loader: <span class="string">'babel-loader'</span>,</span><br><span class="line">          options: &#123;</span><br><span class="line">            presets: [<span class="string">'@babel/preset-env'</span>]</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">// 配置vue-loader</span></span><br><span class="line">      &#123;</span><br><span class="line">        test: <span class="regexp">/\.vue$/</span>,</span><br><span class="line">        use: <span class="string">'vue-loader'</span></span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// webpack-dev-server的独有配置</span></span><br><span class="line">  devServer: &#123;</span><br><span class="line">    <span class="comment">// 自动打开浏览器</span></span><br><span class="line">    open: <span class="literal">true</span>,</span><br><span class="line">    port: <span class="number">3000</span>,</span><br><span class="line">    <span class="comment">// 启用webpack的热更新</span></span><br><span class="line">    <span class="comment">// webpack重新打包的时候不会刷新整个页面，而是只更新需要更新的地方</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="依赖项："><a href="#依赖项：" class="headerlink" title="依赖项："></a>依赖项：</h3><figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">"dependencies": &#123;</span><br><span class="line">   "webpack-cli": "^3.3.12"</span><br><span class="line"> &#125;,</span><br><span class="line"> "devDependencies": &#123;</span><br><span class="line">   "@babel/core": "^7.10.4",</span><br><span class="line">   "@babel/preset-env": "^7.10.4",</span><br><span class="line">   "babel-loader": "^8.1.0",</span><br><span class="line">   "css-loader": "^3.6.0",</span><br><span class="line">   "file-loader": "^6.0.0",</span><br><span class="line">   "html-webpack-plugin": "^4.3.0",</span><br><span class="line">   "jquery": "^3.5.1",</span><br><span class="line">   "less": "^3.11.3",</span><br><span class="line">   "less-loader": "^6.2.0",</span><br><span class="line">   "style-loader": "^1.2.1",</span><br><span class="line">   "url-loader": "^4.1.0",</span><br><span class="line">   "webpack": "^4.43.0",</span><br><span class="line">   "webpack-dev-server": "^3.11.0"</span><br><span class="line"> &#125;,</span><br><span class="line"> "scripts": &#123;</span><br><span class="line">   "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",</span><br><span class="line">   "build": "webpack --config webpack.config.js",</span><br><span class="line">   "dev": "webpack-dev-server --config webpack.config.js"</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>


      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://dttx123.gitee.io/2018/09/05/nodejs/05-express-session/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/blog/images/avatar.jpg">
      <meta itemprop="name" content="大春哥">
      <meta itemprop="description" content="IT">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Starry Night">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/blog/2018/09/05/nodejs/05-express-session/" class="post-title-link" itemprop="url">cookie和session</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2018-09-05 00:00:00" itemprop="dateCreated datePublished" datetime="2018-09-05T00:00:00+08:00">2018-09-05</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-05-13 11:34:53" itemprop="dateModified" datetime="2020-05-13T11:34:53+08:00">2020-05-13</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/%E7%BD%91%E7%BB%9C%E7%BC%96%E7%A8%8B/" itemprop="url" rel="index"><span itemprop="name">网络编程</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h2 id="cookie-session-登陆状态保存"><a href="#cookie-session-登陆状态保存" class="headerlink" title="cookie-session 登陆状态保存"></a>cookie-session 登陆状态保存</h2><h3 id="http协议是无状态的"><a href="#http协议是无状态的" class="headerlink" title="http协议是无状态的"></a>http协议是无状态的</h3><blockquote>
<p>多次请求之间没有关系cookie</p>
</blockquote>
<p>siession</p>
<h2 id="express-session使用"><a href="#express-session使用" class="headerlink" title="express-session使用"></a>express-session使用</h2><ol>
<li>下载  <code>npm i express-session</code></li>
<li>导入  <code>const session = require(&quot;express-session&quot;)</code></li>
<li>使用session中间件<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">app.use(session(&#123;</span><br><span class="line">     <span class="comment">// 给cookie中存储的sessionid加密的， 可以随意指定一个字符串</span></span><br><span class="line"> 	secret: <span class="string">'itcast'</span>,</span><br><span class="line">    <span class="comment">// 设置浏览器端cookie中的sessionId设置名字， 默认connect.sid</span></span><br><span class="line">    name: <span class="string">'sessionId'</span>,</span><br><span class="line">    resave: <span class="literal">false</span>,</span><br><span class="line">    <span class="comment">// 在浏览器和服务器连接的第一时间，分配session  给浏览器指定一个cookie</span></span><br><span class="line">    saveUninitialized: <span class="literal">true</span></span><br><span class="line"> &#125;))</span><br></pre></td></tr></table></figure>

</li>
</ol>
<p>​      可以通过req.session访问到session</p>
<p>​    4. 登录成功，把登录成功的用户信息存储到 req.session.xxx中</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">db.findUser(username, password, result =&gt; &#123;</span><br><span class="line">   <span class="keyword">if</span> (result.length &gt; <span class="number">0</span>) &#123;</span><br><span class="line">     <span class="comment">// 登录成功</span></span><br><span class="line">     <span class="comment">// 登录成功了，把当前用户的信息，保存到req.session中</span></span><br><span class="line">     req.session.user = req.body</span><br><span class="line">     res.redirect(<span class="string">'/'</span>)</span><br><span class="line">   &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">     res.redirect(<span class="string">'/login'</span>)</span><br><span class="line">   &#125;</span><br><span class="line"> &#125;)</span><br></pre></td></tr></table></figure>



<p>​    5. 提供一个中间件，这个中间件在路由的前面，判断 req.session.xxx是否有值，有值，放走，没值，去登录，细节： 如果是/login 直接放走</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">app.use(<span class="function">(<span class="params">req, res, next</span>) =&gt;</span> &#123;    </span><br><span class="line">    <span class="keyword">if</span> ( !req.session.user &amp;&amp; req.url !== <span class="string">'/login'</span> ) &#123;</span><br><span class="line">        res.redirect(<span class="string">'/login'</span>);        </span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        next();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>



<p>​    6. 退出功能：  把req.session.xxx 清空即可</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 把session中的用户信息清空</span></span><br><span class="line">req.session.user = <span class="literal">null</span></span><br><span class="line"><span class="comment">// 跳到登录页</span></span><br><span class="line">res.redirect(<span class="string">'/login'</span>)</span><br></pre></td></tr></table></figure>






      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://dttx123.gitee.io/2018/08/22/vue/vue%E5%9F%BA%E7%A1%80/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/blog/images/avatar.jpg">
      <meta itemprop="name" content="大春哥">
      <meta itemprop="description" content="IT">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Starry Night">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/blog/2018/08/22/vue/vue%E5%9F%BA%E7%A1%80/" class="post-title-link" itemprop="url">vue 基础</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2018-08-22 00:00:00" itemprop="dateCreated datePublished" datetime="2018-08-22T00:00:00+08:00">2018-08-22</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-05-13 21:23:21" itemprop="dateModified" datetime="2020-05-13T21:23:21+08:00">2020-05-13</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/vue/" itemprop="url" rel="index"><span itemprop="name">vue</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="Vue基本概念"><a href="#Vue基本概念" class="headerlink" title="Vue基本概念"></a>Vue基本概念</h1><p><img src="/blog/2018/08/22/vue/vue%E5%9F%BA%E7%A1%80/VUE-logo.png" alt="Vue"></p>
<h2 id="vue介绍"><a href="#vue介绍" class="headerlink" title="vue介绍"></a>vue介绍</h2><ul>
<li><a href="https://cn.vuejs.org/" target="_blank" rel="noopener">vue 中文网</a></li>
<li><a href="https://cn.vuejs.org/v2/guide/index.html#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88" target="_blank" rel="noopener">Vue.js 是什么</a></li>
<li>Vue (读音 /vjuː/，类似于 <strong>view</strong>) 是一套用于构建用户界面的<strong>渐进式框架</strong>。 </li>
</ul>
<h3 id="渐进式的概念"><a href="#渐进式的概念" class="headerlink" title="渐进式的概念"></a>渐进式的概念</h3><p>渐进式：逐渐增强，可以在项目中使用vue的一部分功能，也可以使用vue的全家桶来管理整个项目。</p>
<p><img src="/blog/2018/08/22/vue/vue%E5%9F%BA%E7%A1%80/%E6%B8%90%E8%BF%9B%E5%BC%8F.png" alt></p>
<h3 id="框架的概念"><a href="#框架的概念" class="headerlink" title="框架的概念"></a>框架的概念</h3><ul>
<li><a href="https://zhuanlan.zhihu.com/p/26078359?group_id=830801800406917120" target="_blank" rel="noopener">我们所说的前端框架与库的区别？</a></li>
</ul>
<p><strong>Library</strong></p>
<ul>
<li><p>代表：jQuery</p>
</li>
<li><p>库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能</p>
</li>
</ul>
<ul>
<li>使用库的时候，把库当成工具使用，需要自己控制代码的执行逻辑。</li>
</ul>
<p><strong>Framework</strong></p>
<ul>
<li><p>代表：vue、angular、react</p>
</li>
<li><p>框架，是一套完整的解决方案</p>
</li>
</ul>
<ul>
<li>使用框架的时候，框架实现了大部分的功能，我们只需要按照框架的规则写代码</li>
</ul>
<p><strong>库和框架的区别</strong></p>
<ul>
<li>使用库的时候，很自由，只要调用库提供的各种各样的方法就行，也可以不用其他的一些方法</li>
<li>使用框架的时候，需要按照框架的规则写代码，限制会非常多，但同时框架的功能也很强大，可以极大的提升开发的效率。</li>
</ul>
<h2 id="MVVM的概念"><a href="#MVVM的概念" class="headerlink" title="MVVM的概念"></a>MVVM的概念</h2><ul>
<li>MVVM，一种软件架构模式，决定了写代码的方式。<ul>
<li>M：model数据模型(ajax获取到的数据)    </li>
<li>V：view视图（页面）</li>
<li>VM：ViewModel 视图模型</li>
</ul>
</li>
</ul>
<ul>
<li>MVVM通过<code>数据双向绑定</code>让数据自动地双向同步  <strong>不在需要操作DOM</strong><ul>
<li>V（修改视图） -&gt; M（数据自动同步）</li>
<li>M（修改数据） -&gt; V（视图自动同步）</li>
</ul>
</li>
</ul>
<p><img src="/blog/2018/08/22/vue/vue%E5%9F%BA%E7%A1%80/MVVM.png" alt></p>
<h3 id="Vue中的MVVM"><a href="#Vue中的MVVM" class="headerlink" title="Vue中的MVVM"></a>Vue中的MVVM</h3><p>虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例</p>
<p>注意：</p>
<p><strong>1. 在vue中，不推荐直接手动操作DOM！！！</strong> </p>
<p><strong>2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！</strong></p>
<p><img src="/blog/2018/08/22/vue/vue%E5%9F%BA%E7%A1%80/%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A.png" alt></p>
<h1 id="vue初体验"><a href="#vue初体验" class="headerlink" title="vue初体验"></a>vue初体验</h1><h2 id="基本使用步骤"><a href="#基本使用步骤" class="headerlink" title="基本使用步骤"></a>基本使用步骤</h2><ul>
<li>安装：<code>npm install vue</code> </li>
<li>引入<code>vue.js</code>文件</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>创建Vue实例，指定el和data参数</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建vue实例，需要指定el和data属性</span></span><br><span class="line"><span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="comment">// 指定vue的模版，值是一个选择器</span></span><br><span class="line">    el: <span class="string">'#app'</span>,</span><br><span class="line">    <span class="comment">// 提供了vue中使用的数据</span></span><br><span class="line">    data: &#123;</span><br><span class="line">        msg: <span class="string">'hello vue'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ul>
<li>在模版中显示数据</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    // 通过&#123;&#123;&#125;&#125;可以显示data中的数据</span><br><span class="line">    &#123;&#123;msg&#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>注意事项：</strong></p>
<ul>
<li>在开发阶段，一定要引入未压缩版的vue.js，因为压缩版的vue.js去除了警告信息和错误提示</li>
<li>el不能是<code>html</code>或者<code>body</code></li>
</ul>
<h2 id="插值表达式"><a href="#插值表达式" class="headerlink" title="插值表达式"></a>插值表达式</h2><!-- 插值表达式："&#123;&#123; &#125;&#125;"，也叫Mustache语法，小胡子语法，因为长得像胡子 -->
<!-- - 解释：使用"&#123;&#123; &#125;&#125;"（插值表达式）从`data`中获取数据，并展示在模板中 -->
<!-- - 说明："&#123;&#123; &#125;&#125;"中只能出现JavaScript表达式 -->

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>Hello, &#123;&#123; msg &#125;&#125;.<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; isOk ? 'yes': 'no' &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; 1 + 2 &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>注意点：</strong></p>
<ul>
<li>插值表达式中不能出现语句，比如if / else / for等</li>
<li>插值表达式中访问的数据要在data中存在。</li>
<li>插值表达式不能在属性中使用，只能在标签的内容中使用。</li>
</ul>
<h1 id="vue指令"><a href="#vue指令" class="headerlink" title="vue指令"></a>vue指令</h1><ul>
<li>解释：指令 (Directives) 是带有 <code>v-</code> 前缀的特殊属性，可以在html标签中使用，可以看成特殊的html属性</li>
<li>作用：指令提供了一些特殊的功能，当指向绑定到标签上时，可以给标签增加一些特殊的行为</li>
</ul>
<h2 id="v-bind指令"><a href="#v-bind指令" class="headerlink" title="v-bind指令"></a>v-bind指令</h2><ul>
<li>描述：插值表达式不能用在html的属性上，如果想要动态的设置html元素的属性，需要使用v-bind指令</li>
<li>作用：动态的设置html的属性</li>
<li>语法：<code>v-bind:title=&quot;msg&quot;</code></li>
<li>简写：<code>:title=&quot;msg&quot;</code></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 完整语法 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">v-bind:href</span>=<span class="string">"url"</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 缩写 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">:href</span>=<span class="string">"url"</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="v-model指令"><a href="#v-model指令" class="headerlink" title="v-model指令"></a>v-model指令</h2><p>v-model: <a href="https://cn.vuejs.org/v2/guide/forms.html" target="_blank" rel="noopener">https://cn.vuejs.org/v2/guide/forms.html</a></p>
<ul>
<li>作用：在表单元素上创建双向数据绑定</li>
<li>说明：监听用户的输入事件以更新数据</li>
<li>思考：如何在JS代码中获取到文本框的值？？？</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"message"</span> <span class="attr">placeholder</span>=<span class="string">"edit me"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Message is: &#123;&#123; message &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="双向数据绑定原理"><a href="#双向数据绑定原理" class="headerlink" title="双向数据绑定原理"></a>双向数据绑定原理</h3><ul>
<li>双向数据绑定：将DOM与Vue实例的data数据绑定到一起，彼此之间相互影响<ul>
<li>数据的改变会引起DOM的改变</li>
<li>DOM的改变也会引起数据的变化</li>
</ul>
</li>
<li>原理：数据劫持，<code>Object.defineProperty</code>中的<code>get</code>和<code>set</code>方法<ul>
<li><code>getter</code>和<code>setter</code>：访问器</li>
<li>作用：指定<code>读取或设置</code>对象属性值的时候，执行的操作</li>
</ul>
</li>
<li>注意：<code>Object.defineProperty</code>方法是ES5中提供的，IE8浏览器不支持这个方法。因此，Vue支持IE8及其以下版本浏览器</li>
<li><a href="https://cn.vuejs.org/v2/guide/reactivity.html" target="_blank" rel="noopener">Vue - 深入响应式原理</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" target="_blank" rel="noopener">MDN - Object.defineProperty()</a></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">  语法</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="keyword">var</span> obj = &#123;&#125;</span><br><span class="line"><span class="built_in">Object</span>.defineProperty(obj, <span class="string">'msg'</span>, &#123;</span><br><span class="line">  <span class="comment">// 设置 obj.msg 执行的操作</span></span><br><span class="line">  <span class="keyword">set</span>: function () &#123;&#125;,</span><br><span class="line">  <span class="comment">// 读取 obj.msg 执行的操作</span></span><br><span class="line">  <span class="keyword">get</span>: function () &#123;&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="Vue双向绑定的极简实现"><a href="#Vue双向绑定的极简实现" class="headerlink" title="Vue双向绑定的极简实现"></a>Vue双向绑定的极简实现</h3><ul>
<li><a href="https://segmentfault.com/a/1190000006599500" target="_blank" rel="noopener">剖析Vue原理&amp;实现双向绑定MVVM</a></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 示例 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">id</span>=<span class="string">"txt"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"msgBox"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">const</span> txt = <span class="built_in">document</span>.getElementById(<span class="string">'txt'</span>)</span></span><br><span class="line"><span class="javascript"><span class="keyword">const</span> msgBox = <span class="built_in">document</span>.getElementById(<span class="string">'msgBox'</span>)</span></span><br><span class="line"><span class="actionscript"><span class="keyword">const</span> obj = &#123;&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript"><span class="comment">// 给对象obj添加msg属性，并设置setter访问器</span></span></span><br><span class="line"><span class="javascript"><span class="built_in">Object</span>.defineProperty(obj, <span class="string">'msg'</span>, &#123;</span></span><br><span class="line"><span class="actionscript">  <span class="comment">// 设置 obj.msg 执行的操作</span></span></span><br><span class="line"><span class="actionscript">  <span class="keyword">set</span>: <span class="function"><span class="keyword">function</span> <span class="params">(curVal)</span> </span>&#123;</span></span><br><span class="line">    txt.value = curVal</span><br><span class="line">    msgBox.innerText = curVal</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="actionscript"><span class="comment">// 监听文本框的改变</span></span></span><br><span class="line"><span class="actionscript">txt.addEventListener(<span class="string">'input'</span>, <span class="function"><span class="keyword">function</span> <span class="params">(event)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">  obj.msg = <span class="keyword">this</span>.value</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>


<h2 id="v-on指令"><a href="#v-on指令" class="headerlink" title="v-on指令"></a>v-on指令</h2><p><a href="https://cn.vuejs.org/v2/guide/events.html" target="_blank" rel="noopener">https://cn.vuejs.org/v2/guide/events.html</a></p>
<ul>
<li>作用：绑定事件</li>
<li>语法：<code>v-on:click=&quot;say&quot;</code> or <code>v-on:click=&quot;say(&#39;参数&#39;, $event)&quot;</code></li>
<li>简写：<code>@click=&quot;say&quot;</code></li>
<li>说明：绑定的事件从<code>methods</code>中获取</li>
<li>案例：跑马灯</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 完整语法 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">v-on:click</span>=<span class="string">"doSomething"</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 缩写 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> @<span class="attr">click</span>=<span class="string">"doSomething"</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="事件修饰符"><a href="#事件修饰符" class="headerlink" title="事件修饰符"></a>事件修饰符</h3><ul>
<li><code>.stop</code>       阻止冒泡，调用 event.stopPropagation()</li>
<li><code>.prevent</code>    阻止默认行为，调用 event.preventDefault()</li>
<li><code>.capture</code>    添加事件侦听器时使用事件<code>捕获</code>模式</li>
<li><code>.self</code>       只当事件在该元素本身（比如不是子元素）触发时，才会触发事件</li>
<li><code>.once</code>       事件只触发一次</li>
</ul>
<h3 id="按键修饰符"><a href="#按键修饰符" class="headerlink" title="按键修饰符"></a>按键修饰符</h3><p>在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 <code>v-on</code> 在监听键盘事件时添加按键修饰符： </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">.enter</span><br><span class="line">.tab</span><br><span class="line">.delete (捕获“删除”和“退格”键)</span><br><span class="line">.esc</span><br><span class="line">.space</span><br><span class="line">.up</span><br><span class="line">.down</span><br><span class="line">.left</span><br><span class="line">.right</span><br></pre></td></tr></table></figure>

<h2 id="v-for"><a href="#v-for" class="headerlink" title="v-for"></a>v-for</h2><ul>
<li><a href="https://cn.vuejs.org/v2/guide/list.html" target="_blank" rel="noopener">列表渲染</a></li>
</ul>
<ul>
<li>作用：基于源数据多次渲染元素或模板块</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 1 基础用法 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"item in items"</span>&gt;</span></span><br><span class="line">  &#123;&#123; item.text &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- item 为当前项，index 为索引 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"(item, index) in list"</span>&gt;</span>&#123;&#123;item&#125;&#125; -- &#123;&#123;index&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- item 为值，key 为键，index 为索引 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"(item, key, index) in obj"</span>&gt;</span>&#123;&#123;item&#125;&#125; -- &#123;&#123;key&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"item in 10"</span>&gt;</span>&#123;&#123;item&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="key属性"><a href="#key属性" class="headerlink" title="key属性"></a>key属性</h3><ul>
<li>推荐：使用 <code>v-for</code> 的时候提供 <code>key</code> 属性，能够提升列表渲染的性能</li>
<li>说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。</li>
<li><a href="https://cn.vuejs.org/v2/guide/list.html#key" target="_blank" rel="noopener">vue key</a></li>
<li><a href="https://www.zhihu.com/question/61064119/answer/183717717" target="_blank" rel="noopener">vue key属性的说明</a></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"item in items"</span> <span class="attr">:key</span>=<span class="string">"item.id"</span>&gt;</span></span><br><span class="line">  <span class="comment">&lt;!-- 内容 --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="v-if-和-v-show"><a href="#v-if-和-v-show" class="headerlink" title="v-if 和 v-show"></a>v-if 和 v-show</h2><ul>
<li><a href="https://cn.vuejs.org/v2/guide/conditional.html" target="_blank" rel="noopener">条件渲染</a></li>
<li><code>v-if</code>：根据表达式的值的真假条件，销毁或重建元素</li>
<li><code>v-show</code>：根据表达式之真假值，切换元素的 display CSS 属性</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-show</span>=<span class="string">"isShow"</span>&gt;</span>这个元素展示出来了吗？？？<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-if</span>=<span class="string">"isShow"</span>&gt;</span>这个元素，在HTML结构中吗？？？<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="v-else与v-else-if指令"><a href="#v-else与v-else-if指令" class="headerlink" title="v-else与v-else-if指令"></a>v-else与v-else-if指令</h2><p>v-else和v-else-if指令用于指定其他的条件，需要配合v-if使用。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-if</span>=<span class="string">"isShow"</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-else</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>注意：</p>
<p>​    1. v-else必须紧跟在<code>v-if</code>或者<code>v-else-if</code>的后面</p>
<h2 id="v-text指令"><a href="#v-text指令" class="headerlink" title="v-text指令"></a>v-text指令</h2><ul>
<li>解释：更新元素的 <code>textContent</code>。如果要更新部分的 <code>textContent</code> ，需要使用 <code></code> 插值。 </li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-text</span>=<span class="string">"msg"</span>&gt;</span><span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="v-html指令"><a href="#v-html指令" class="headerlink" title="v-html指令"></a>v-html指令</h2><ul>
<li>解释：更新DOM对象的 innerHTML,html标签会生效</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-html</span>=<span class="string">"msg"</span>&gt;</span><span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 <a href="https://en.wikipedia.org/wiki/Cross-site_scripting" target="_blank" rel="noopener">XSS 攻击</a>。只在可信内容上使用 <code>v-html</code>，</strong>永不<strong>用在用户提交的内容上。</strong> </p>
<h2 id="提升性能：v-pre"><a href="#提升性能：v-pre" class="headerlink" title="提升性能：v-pre"></a>提升性能：v-pre</h2><ul>
<li>说明：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-pre</span>&gt;</span>&#123;&#123; this will not be compiled &#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="提升性能：v-once"><a href="#提升性能：v-once" class="headerlink" title="提升性能：v-once"></a>提升性能：v-once</h2><ul>
<li>说明：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-once</span>&gt;</span>This will never change: &#123;&#123;msg&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="样式处理-class和style"><a href="#样式处理-class和style" class="headerlink" title="样式处理-class和style"></a>样式处理-class和style</h2><ul>
<li>使用方式：<code>v-bind:class=&quot;expression&quot;</code> or <code>:class=&quot;expression&quot;</code></li>
<li>表达式的类型：字符串、数组、对象（重点）</li>
<li>语法：</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 1 --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 重点 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:class</span>=<span class="string">"&#123; active: true &#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span> ===&gt;</span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"active"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 2 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">:class</span>=<span class="string">"['active', 'text-danger']"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span> ===&gt;</span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"active text-danger"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 3 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:class</span>=<span class="string">"[&#123; active: true &#125;, errorClass]"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span> ===&gt;</span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"active text-danger"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">--- style ---</span><br><span class="line"><span class="comment">&lt;!-- 1 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:style</span>=<span class="string">"&#123; color: activeColor, 'font-size': fontSize + 'px' &#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 2 将多个 样式对象 应用到一个元素上--&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- baseStyles 和 overridingStyles 都是对象 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:style</span>=<span class="string">"[baseStyles, overridingStyles]"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h1 id="计算属性"><a href="#计算属性" class="headerlink" title="计算属性"></a>计算属性</h1><blockquote>
<p>计算属性：当计算属性依赖的数据发生改变的时候，计算属性会重新计算一次，如果计算属性依赖的属性没有发生改变，那么计算属性就不会重新计算。</p>
</blockquote>
<h2 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">      el: <span class="string">'#app'</span>,</span><br><span class="line">      data: &#123;</span><br><span class="line">        n1:<span class="string">''</span>,</span><br><span class="line">        n2:<span class="string">''</span></span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="comment">//n3依赖与n1和n2的值，当n1 和 n2发生改变的时候，这个函数就会执行。</span></span><br><span class="line">    	<span class="comment">//返回值就是n3的值</span></span><br><span class="line">      computed: &#123;</span><br><span class="line">        n3()&#123;</span><br><span class="line">          <span class="keyword">return</span> +<span class="keyword">this</span>.n1 + +<span class="keyword">this</span>.n2;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br></pre></td></tr></table></figure>

<p><strong>计算属性是基于它们的依赖项进行缓存的</strong> </p>
<p>如果页面中需要使用多次计算属性的值，只会计算一次，计算属性只有在它的相关依赖发生改变时才会重新求值。 </p>
<p><strong>计算属性不能与data中的属性同名，因为无论是data中的属性还是计算属性，最终都是挂载到vm上的</strong></p>
<h1 id="watch监视数据的变化"><a href="#watch监视数据的变化" class="headerlink" title="watch监视数据的变化"></a>watch监视数据的变化</h1><blockquote>
<p>vue实例中提供了一个watch属性，用于监听vue实例中的属性的变化。</p>
<p>watch对应了一个对象，键是观察的属性，值是对应的回调函数。</p>
</blockquote>
<h2 id="基本使用-1"><a href="#基本使用-1" class="headerlink" title="基本使用"></a>基本使用</h2><ul>
<li>基本使用</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//第一个参数：当前值</span></span><br><span class="line"><span class="comment">//第二个参数：上一次的值</span></span><br><span class="line">username: <span class="function"><span class="keyword">function</span>(<span class="params">curr, old</span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>表单校验效果</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// watch: 监视数据的变化</span></span><br><span class="line">watch: &#123;</span><br><span class="line">    <span class="comment">// 监视msg，只要msg属性的值发生改变，function就会执行</span></span><br><span class="line">    <span class="comment">// value: 当前值  oldValue:上一次的值</span></span><br><span class="line">    msg: <span class="function"><span class="keyword">function</span>(<span class="params">value</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (value.length &gt;=<span class="number">3</span> &amp;&amp; value.length &lt;= <span class="number">6</span>) &#123;</span><br><span class="line">            <span class="keyword">this</span>.tips = <span class="string">'正确'</span></span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="keyword">this</span>.tips = <span class="string">'密码格式不正确'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="监视对象"><a href="#监视对象" class="headerlink" title="监视对象"></a>监视对象</h2><blockquote>
<p>监视对象的时候，需要加上<code>deep: true</code></p>
<p>为了发现对象内部值的变化，可以在选项参数中指定 <code>deep: true</code> </p>
</blockquote>
<ul>
<li>如果是一个对象，无法监听到对象内部值的变化</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">  &lt;script&gt;</span><br><span class="line">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">      el: <span class="string">'#app'</span>,</span><br><span class="line">      data: &#123;</span><br><span class="line">        user: &#123;</span><br><span class="line">          name:<span class="string">'zs'</span>,</span><br><span class="line">          age: <span class="number">18</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      watch: &#123;</span><br><span class="line">        user: <span class="function"><span class="keyword">function</span>(<span class="params">curr, old</span>) </span>&#123;</span><br><span class="line">          <span class="built_in">console</span>.log(curr, old);</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">  &lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;input type="text" v-model="user.name"&gt;</span></span><br><span class="line"><span class="regexp">&lt;input type="text" v-model="user.age"&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>需要加上deep</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">watch: &#123;</span><br><span class="line">    user: &#123;</span><br><span class="line">        deep: <span class="literal">true</span>,</span><br><span class="line">            handler: <span class="function"><span class="keyword">function</span>(<span class="params">curr, old</span>) </span>&#123;</span><br><span class="line">                <span class="comment">//注意：如果监听的是对象，新值与旧值都是相同的，因为指向了同一个对象。</span></span><br><span class="line">                <span class="comment">//https://cn.vuejs.org/v2/api/#vm-watch</span></span><br><span class="line">                <span class="built_in">console</span>.log(curr.age, curr.name);</span><br><span class="line">            &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><strong>immediate</strong> 属性,立马进行监听</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">watch: &#123;</span><br><span class="line">    user: &#123;</span><br><span class="line">        deep: <span class="literal">true</span>,</span><br><span class="line">        immediate:<span class="literal">true</span>,</span><br><span class="line">        handler: <span class="function"><span class="keyword">function</span>(<span class="params">curr, old</span>) </span>&#123;</span><br><span class="line">          <span class="built_in">console</span>.log(curr.age, curr.name);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h1 id="生命周期与钩子函数"><a href="#生命周期与钩子函数" class="headerlink" title="生命周期与钩子函数"></a>生命周期与钩子函数</h1><h2 id="生命周期介绍"><a href="#生命周期介绍" class="headerlink" title="生命周期介绍"></a>生命周期介绍</h2><ul>
<li><a href="https://cn.vuejs.org/v2/api/#选项-生命周期钩子" target="_blank" rel="noopener">vue生命周期钩子函数</a></li>
<li>简单说：<strong>一个实例从开始到最后消亡所经历的各种状态，就是一个实例的生命周期</strong></li>
</ul>
<p>实例生命周期函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数！</p>
<ul>
<li>生命周期的钩子函数：框架提供的函数，能够让开发人员的代码，参与到组件的生命周期中。也就是说，通过钩子函数，就可以控制组件的行为</li>
<li>注意：vue再执行过程中会自动调用<code>生命周期钩子函数</code>，我们只需要提供这些钩子函数即可</li>
<li>注意：钩子函数的名称都是固定的！！！</li>
</ul>
<h2 id="钩子函数-beforeCreate"><a href="#钩子函数-beforeCreate" class="headerlink" title="钩子函数 - beforeCreate()"></a>钩子函数 - beforeCreate()</h2><ul>
<li>说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用</li>
<li>注意：此时，无法获取 data中的数据、methods中的方法</li>
</ul>
<h2 id="钩子函数-created"><a href="#钩子函数-created" class="headerlink" title="钩子函数 - created()"></a>钩子函数 - <strong>created()</strong></h2><ul>
<li>注意：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据</li>
<li><a href="https://segmentfault.com/a/1190000008879966" target="_blank" rel="noopener">vue实例生命周期 参考1</a></li>
<li><a href="https://segmentfault.com/a/1190000008010666" target="_blank" rel="noopener">vue实例生命周期 参考2</a></li>
<li>使用场景：发送请求获取数据</li>
</ul>
<h2 id="钩子函数-beforeMounted"><a href="#钩子函数-beforeMounted" class="headerlink" title="钩子函数 - beforeMounted()"></a>钩子函数 - beforeMounted()</h2><ul>
<li>说明：在挂载开始之前被调用</li>
</ul>
<h2 id="钩子函数-mounted"><a href="#钩子函数-mounted" class="headerlink" title="钩子函数 - mounted()"></a>钩子函数 - <strong>mounted()</strong></h2><ul>
<li>说明：此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作</li>
</ul>
<h2 id="钩子函数-beforeUpdated"><a href="#钩子函数-beforeUpdated" class="headerlink" title="钩子函数 - beforeUpdated()"></a>钩子函数 - beforeUpdated()</h2><ul>
<li>说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。</li>
</ul>
<h2 id="钩子函数-updated"><a href="#钩子函数-updated" class="headerlink" title="钩子函数 - updated()"></a>钩子函数 - updated()</h2><ul>
<li>说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。</li>
</ul>
<h2 id="钩子函数-beforeDestroy"><a href="#钩子函数-beforeDestroy" class="headerlink" title="钩子函数 - beforeDestroy()"></a>钩子函数 - beforeDestroy()</h2><ul>
<li>说明：实例销毁之前调用。在这一步，实例仍然完全可用。</li>
<li>使用场景：实例销毁之前，执行清理任务，比如：清除定时器等</li>
</ul>
<h2 id="钩子函数-destroyed"><a href="#钩子函数-destroyed" class="headerlink" title="钩子函数 - destroyed()"></a>钩子函数 - destroyed()</h2><ul>
<li>说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。</li>
</ul>
<h1 id="axios"><a href="#axios" class="headerlink" title="axios"></a>axios</h1><blockquote>
<p>Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。</p>
<p>vue1.x的时候vue提供了一个包，vue-resource 专门用于发送ajax请求，但是vue2.x的时候，vue的作者的自己发了一个文章，推荐大家都使用axios库来发送ajax请求。</p>
</blockquote>
<p>vue自身没有提供发送ajax请求的工具</p>
<p>Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 </p>
<ul>
<li>Promise based HTTP client for the browser and node.js<ul>
<li>以Promise为基础的HTTP客户端，适用于：浏览器和node.js</li>
<li>封装ajax，用来发送请求，异步获取数据</li>
</ul>
</li>
<li>安装：<code>npm i -S axios</code></li>
<li><a href>axios github</a></li>
</ul>
<h1 id="响应式数据的说明"><a href="#响应式数据的说明" class="headerlink" title="响应式数据的说明"></a>响应式数据的说明</h1><blockquote>
<p>响应式数据: 把data中的数据挂到vm身上，vm身上的这个数据其实就是响应式的</p>
<p>一旦数据发生了改变，页面中的内容也会跟着改变</p>
</blockquote>
<h2 id="动态添加的数据不是响应式的以及-set的使用"><a href="#动态添加的数据不是响应式的以及-set的使用" class="headerlink" title="动态添加的数据不是响应式的以及$set的使用"></a>动态添加的数据不是响应式的以及$set的使用</h2><ul>
<li>data中的数据一定要先声明，再使用，动态给对象添加的属性不是响应式的</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=<span class="string">"app"</span>&gt;</span><br><span class="line">    &lt;p&gt;&#123;&#123;person.name&#125;&#125;---&#123;&#123;person.age&#125;&#125;---&#123;&#123;person.gender&#125;&#125;&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br><span class="line"></span><br><span class="line">&lt;script src=<span class="string">"vue.js"</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;script&gt;</span></span><br><span class="line"><span class="regexp">    var vm = new Vue(&#123;</span></span><br><span class="line"><span class="regexp">        el: '#app',</span></span><br><span class="line"><span class="regexp">        data: &#123;</span></span><br><span class="line"><span class="regexp">            person: &#123;</span></span><br><span class="line"><span class="regexp">                name: 'zs',</span></span><br><span class="line"><span class="regexp">                age: 18</span></span><br><span class="line"><span class="regexp">            &#125;</span></span><br><span class="line"><span class="regexp">        &#125;</span></span><br><span class="line"><span class="regexp">    &#125;)</span></span><br><span class="line"><span class="regexp">&lt;/</span>script&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 动态给data中添加的数据是无效的</span></span><br><span class="line"><span class="comment">// 在vue实例创建的时候，会把data中的数据绑定到vm上，所以data中的数据是响应的</span></span><br><span class="line"><span class="comment">// 但是动态绑定的数据不是响应是的。</span></span><br><span class="line">vm.person.gender = <span class="string">'男'</span></span><br></pre></td></tr></table></figure>

<ul>
<li>如果想要动态绑定数据，并且是响应式的,需要使用<code>vm.$set方法</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.$<span class="keyword">set</span>(this.person, 'gender', '男')</span><br></pre></td></tr></table></figure>

<p>结论：</p>
<ul>
<li>如果是对象，动态给对象添加或者删除一个属性，vue是检测不到的，所以不是响应的，如果想用动态添加的数据是响应式，需要使用<code>Vue.set(obj, key, value)</code> <code>vm.$set(obj, key ,value)</code></li>
<li>如果是数组，通过数组的下标或者是数组的长度，vue也是检测不到，所以操作也不是响应式的<ul>
<li>使用<code>Vue.set</code>方法</li>
<li>数组的变异的方法，这个方法会改变原数组，能够触发vue的更新。</li>
</ul>
</li>
</ul>
<h2 id="异步DOM更新以及-nextTick的说明"><a href="#异步DOM更新以及-nextTick的说明" class="headerlink" title="异步DOM更新以及$nextTick的说明"></a>异步DOM更新以及$nextTick的说明</h2><p>在vue中数据发生了改变，DOM中的数据也会跟着发生改变，但是这个过程是异步的</p>
<p>vue的数据发生改变之后，DOM不会立即更新，会等到下一次渲染工作执行的时候才会更新DOM</p>
<p>目的：为了提高渲染的性能</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">clickFn () &#123;</span><br><span class="line">    <span class="comment">// 数据变化了， view中的内容也要跟着变</span></span><br><span class="line">    <span class="keyword">this</span>.msg = <span class="string">'你好啊，vue1'</span></span><br><span class="line">    <span class="keyword">this</span>.msg = <span class="string">'你好啊，vue2'</span></span><br><span class="line">    <span class="keyword">this</span>.msg = <span class="string">'你好啊，vue3'</span></span><br><span class="line">    <span class="keyword">this</span>.msg = <span class="string">'你好啊，vue4'</span></span><br><span class="line">    <span class="keyword">this</span>.msg = <span class="string">'你好啊，vue5'</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// 为什么：DOM操作是非常消耗性能的，简单DOM的操作能够提升我们的性能，如果每次操作数据，都立即更新DOM，无疑性能会非常的低，所以vue中会等待数据都修改完成</span></span><br><span class="line">    <span class="keyword">let</span> result = <span class="built_in">document</span>.querySelector(<span class="string">'p'</span>).innerHTML</span><br><span class="line">    <span class="built_in">console</span>.log(result)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><code>$nextTick</code>方法会在DOM更新之后执行</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">// 在实际开发中，有可能需要在数据改变之后，获取到更新之后的DOM数据</span></span><br><span class="line"><span class="comment">// 这个时候可以使用 $nextTick函数</span></span><br><span class="line"><span class="comment">// 当vue更新完DOM后，会自动调用$nextTick函数，确保在这个函数中可以获取到DOM结构是最新的</span></span><br><span class="line"><span class="keyword">this</span>.$nextTick(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> result = <span class="built_in">document</span>.querySelector(<span class="string">'p'</span>).innerHTML</span><br><span class="line">    <span class="built_in">console</span>.log(result)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">await</span> <span class="keyword">this</span>.$nextTick()</span><br></pre></td></tr></table></figure>



<h1 id="组件化开发"><a href="#组件化开发" class="headerlink" title="组件化开发"></a>组件化开发</h1><h2 id="组件的概念"><a href="#组件的概念" class="headerlink" title="组件的概念"></a>组件的概念</h2><blockquote>
<p>组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。 </p>
<p>在vue中都是组件化开发的，组件化开发就是把一个完整的页面分割成一个一个的小组件。</p>
</blockquote>
<p>组件的优点：</p>
<ul>
<li>容易维护</li>
<li>复用</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">vue组件分为全局组件和局部组件</span><br><span class="line">全局组件：在所有的vue实例中都能使用</span><br><span class="line">局部组件：只有在当前vue实例中能够使用</span><br></pre></td></tr></table></figure>

<h2 id="全局组件"><a href="#全局组件" class="headerlink" title="全局组件"></a>全局组件</h2><ul>
<li>定义</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//要注册一个全局组件，可以使用 Vue.component(tagName, options)。</span></span><br><span class="line"><span class="comment">//注册一个全局的组件</span></span><br><span class="line"><span class="comment">// Vue.component(tagName, options)</span></span><br><span class="line">Vue.component(<span class="string">"hello"</span>, &#123;</span><br><span class="line">    template: <span class="string">'&lt;h3&gt;我是全局组件！&lt;/h3&gt;'</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<ul>
<li>使用</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">全局组件可以在所有的实例中使用</span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">hello</span>&gt;</span><span class="tag">&lt;/<span class="name">hello</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>注意点：组件的模板有且仅有一个根元素</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>我是全局组件！<span class="tag">&lt;/<span class="name">h3</span>&gt;</span><span class="tag">&lt;<span class="name">p</span>&gt;</span>有两个根元素<span class="tag">&lt;/<span class="name">p</span>&gt;</span>';  //错误的用法</span><br><span class="line">template: '<span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;<span class="name">h3</span>&gt;</span>我是全局组件！<span class="tag">&lt;/<span class="name">h3</span>&gt;</span><span class="tag">&lt;<span class="name">p</span>&gt;</span>有两个根元素<span class="tag">&lt;/<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span>';</span><br></pre></td></tr></table></figure>

<ul>
<li>如果有很多的内容，template可以使用字符串模版</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">"my-button"</span>, &#123;</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">        &lt;div&gt;</span></span><br><span class="line"><span class="string">        &lt;h1&gt;我是一个标题&lt;/h1&gt;</span></span><br><span class="line"><span class="string">        &lt;p&gt;我是一个段落&lt;/p&gt;</span></span><br><span class="line"><span class="string">        &lt;/div&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h2 id="局部组件"><a href="#局部组件" class="headerlink" title="局部组件"></a>局部组件</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在vue实例的内部，通过components属性来定义局部组件</span></span><br><span class="line">components: &#123;</span><br><span class="line">    <span class="string">"my-button"</span>: &#123;</span><br><span class="line">        template: <span class="string">`</span></span><br><span class="line"><span class="string">        &lt;div&gt;</span></span><br><span class="line"><span class="string">        &lt;h1&gt;我是一个标题&lt;/h1&gt;</span></span><br><span class="line"><span class="string">        &lt;p&gt;我是一个段落&lt;/p&gt;</span></span><br><span class="line"><span class="string">        &lt;/div&gt;</span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="组件是特殊的vue实例"><a href="#组件是特殊的vue实例" class="headerlink" title="组件是特殊的vue实例"></a>组件是特殊的vue实例</h2><blockquote>
<p>可以将组件看成是一个vue的实例，因此，在vue实例中能配置的属性，在组件中依旧能够配置。</p>
<p>比如：data,method,watch,computed,钩子函数等</p>
<p>注意：组件中data属性必须是一个函数，返回值才是data的数据</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//可以把组件看成一个vue实例</span></span><br><span class="line">Vue.component(<span class="string">"my-button"</span>, &#123;</span><br><span class="line">   template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div&gt;</span></span><br><span class="line"><span class="string">    	&lt;h1 @click="add"&gt;我是一个标题&lt;/h1&gt;</span></span><br><span class="line"><span class="string">    	&lt;p&gt;&#123;&#123;msg&#125;&#125;&lt;/p&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line">    <span class="comment">//组件可以通过data属性提供组件自己的数据，注意，组件的data参数必须是一个函数，不能是用一个对象。</span></span><br><span class="line">    data() &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">        	msg: <span class="string">'hello vue'</span></span><br><span class="line">    	&#125;;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        add() &#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">"哈哈"</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>



<ul>
<li>组件是一个独立封闭的个体，组件之间的数据是无法相互使用的</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">'#app'</span>,</span><br><span class="line">    data: &#123;</span><br><span class="line">        outer: <span class="string">'我是实例的数据'</span></span><br><span class="line">    &#125;,</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">//可以把组件看成一个vue实例</span></span><br><span class="line">Vue.component(<span class="string">"my-button"</span>, &#123;</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div&gt;</span></span><br><span class="line"><span class="string">        &lt;p&gt;&#123;&#123;inner&#125;&#125;&lt;/p&gt;  //正确，组件可以使用自己的数据</span></span><br><span class="line"><span class="string">        &lt;p&gt;&#123;&#123;outer&#125;&#125;&lt;/p&gt;  //报错，组件无法使用其他组件的数据</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line">    data() &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            inner: <span class="string">'我是组件的数据'</span></span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h2 id="vue-devTool浏览器插件的使用"><a href="#vue-devTool浏览器插件的使用" class="headerlink" title="vue-devTool浏览器插件的使用"></a>vue-devTool浏览器插件的使用</h2><blockquote>
<p>vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。</p>
</blockquote>
<p>默认插件必须在http协议下打开才能看到。</p>
<p>插件详细信息—》允许访问文件网址   ，这样file协议打开也能看到效果了</p>
<h1 id="组件通讯"><a href="#组件通讯" class="headerlink" title="组件通讯"></a>组件通讯</h1><blockquote>
<p>因为组件是一个独立的个体，组件无法使用到外部的数据</p>
<p>但是在真实开发中，多个组件之间是需要相互使用彼此的数据的，因此需要使用组件通讯的技术，让组件之间能够相互传值。</p>
</blockquote>
<p>组件通讯分为三类 </p>
<ul>
<li>父组件传递值给子组件</li>
<li>子组件传递值给父组件</li>
<li>非父子组件之间的传值 </li>
</ul>
<h2 id="组件通讯-父传子"><a href="#组件通讯-父传子" class="headerlink" title="组件通讯-父传子"></a>组件通讯-父传子</h2><ul>
<li>定义两个组件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">"parent"</span>, &#123;</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class="parent"&gt;</span></span><br><span class="line"><span class="string">    &lt;p&gt;这是父组件&lt;/p&gt;</span></span><br><span class="line"><span class="string">    &lt;son&gt;&lt;/son&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line">    data () &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            car: <span class="string">'玛莎拉蒂'</span>,</span><br><span class="line">            month: <span class="number">1000000</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">Vue.component(<span class="string">"son"</span>, &#123;</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class="son"&gt;</span></span><br><span class="line"><span class="string">    &lt;p&gt;这是子组件&lt;/p&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">&lt;div id=<span class="string">"app"</span>&gt;</span><br><span class="line">    &lt;parent&gt;&lt;<span class="regexp">/parent&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>组件的通讯</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 在父组件的模版中，给子组件增加一个自定义的属性。</span><br><span class="line">&lt;son :car=<span class="string">"car"</span>&gt;&lt;<span class="regexp">/son&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">2. 子组件通过props属性进行接收</span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/接收父组件传递过来的值</span></span><br><span class="line"><span class="regexp">props: ['car']</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">3. 子组件使用父组件传递过来的值</span></span><br><span class="line"><span class="regexp">template: `</span></span><br><span class="line"><span class="regexp">&lt;div class="son"&gt;</span></span><br><span class="line"><span class="regexp">	&lt;p&gt;这是子组件&lt;/</span>p&gt;</span><br><span class="line">	&lt;p&gt;这是父组件传递过来的值----&#123;&#123;car&#125;&#125;&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br><span class="line"><span class="string">`,</span></span><br></pre></td></tr></table></figure>

<ul>
<li>思考，怎么获取父组件的money</li>
</ul>
<p><strong>注意：props负责获取父组件的传递过来的，props中的值是只读的，不允许修改</strong></p>
<h2 id="组件通讯-子到父"><a href="#组件通讯-子到父" class="headerlink" title="组件通讯-子到父"></a>组件通讯-子到父</h2><blockquote>
<p>参考链接：<a href="https://blog.csdn.net/jsxiaoshu/article/details/79058940" target="_blank" rel="noopener">https://blog.csdn.net/jsxiaoshu/article/details/79058940</a></p>
</blockquote>
<p>整体思路</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 父组件给子组件注册一个自定义事件</span><br><span class="line"><span class="number">2.</span> 子组件触发这个自定义事件，触发事件时把数据传递给父组件</span><br></pre></td></tr></table></figure>

<ul>
<li>父组件给子组件注册事件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;son @fn=<span class="string">'getData'</span>&gt;&lt;<span class="regexp">/son&gt;</span></span><br><span class="line"><span class="regexp">methods: &#123;</span></span><br><span class="line"><span class="regexp">    /</span><span class="regexp">/1. 父组件中定义了一个方法，用于获取数据</span></span><br><span class="line"><span class="regexp">    getData () &#123;</span></span><br><span class="line"><span class="regexp">        console.log("父组件中提供的方法");</span></span><br><span class="line"><span class="regexp">    &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>子组件触发自定义事件，并且把要传递的数据作为参数进行传递</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//$emit可以出发当前实例的事件</span></span><br><span class="line"><span class="keyword">this</span>.$emit(<span class="string">'getData'</span>, <span class="keyword">this</span>.car);</span><br></pre></td></tr></table></figure>

<ul>
<li>父组件获取值</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">methods: &#123;</span><br><span class="line">    <span class="comment">//1. 父组件中定义了一个方法，用于获取数据</span></span><br><span class="line">    getData (skill) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">"父组件中提供的方法"</span>, skill);</span><br><span class="line">        <span class="keyword">this</span>.skill = skill;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="案例-todomvc"><a href="#案例-todomvc" class="headerlink" title="案例-todomvc"></a>案例-todomvc</h2><h2 id="组件通讯-非父子"><a href="#组件通讯-非父子" class="headerlink" title="组件通讯-非父子"></a>组件通讯-非父子</h2><blockquote>
<p>非父子组件之间通过一个空的Vue实例来传递数据。</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> bus = <span class="keyword">new</span> Vue();   <span class="comment">//bus:公交车  事件总线</span></span><br></pre></td></tr></table></figure>

<ul>
<li>核心逻辑</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">组件A给组件B传值：</span><br><span class="line"><span class="number">1.</span> 组件A给bus注册一个事件，监听事件的处理程序</span><br><span class="line"><span class="number">2.</span> 组件B触发bus上对应的事件，把 值当成参数来传递</span><br><span class="line"><span class="number">3.</span> 组件A通过事件处理程序获取数据</span><br></pre></td></tr></table></figure>



<ul>
<li>组件A给bus注册事件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">//rose在组件创建的时候，给bus注册了一个事件</span></span><br><span class="line">created () &#123;</span><br><span class="line">    bus.$on(<span class="string">"get"</span>, (msg)=&gt;&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">"这是rose注册的事件"</span>, msg);</span><br><span class="line">        <span class="keyword">this</span>.msg = msg;</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>组件B触发bus的事件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;button @click=<span class="string">"send"</span>&gt;表白&lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">methods: &#123;</span></span><br><span class="line"><span class="regexp">    send() &#123;</span></span><br><span class="line"><span class="regexp">        bus.$emit("get", this.msg);</span></span><br><span class="line"><span class="regexp">    &#125;</span></span><br><span class="line"><span class="regexp">&#125;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>组件A通过事件处理程序可以获取到传递的值</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">bus.$on(<span class="string">"get"</span>, (msg)=&gt;&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"这是rose注册的事件"</span>, msg);</span><br><span class="line">    <span class="keyword">this</span>.msg = msg;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p><strong>注意点：1. 必须是同一辆公交车  2. 注册的事件和触发的事件必须保持一致</strong></p>
<h2 id="案例：开关灯案例"><a href="#案例：开关灯案例" class="headerlink" title="案例：开关灯案例"></a>案例：开关灯案例</h2><h2 id="bus是一种通用的组件通讯方案"><a href="#bus是一种通用的组件通讯方案" class="headerlink" title="bus是一种通用的组件通讯方案"></a>bus是一种通用的组件通讯方案</h2><p>我们有三种组件通讯的方案</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 父传子</span><br><span class="line"><span class="number">2.</span> 子传父</span><br><span class="line"><span class="number">3.</span> 非父子（bus）</span><br><span class="line"></span><br><span class="line">其实bus方案也适用于父传子和子传父的方案</span><br></pre></td></tr></table></figure>

<h1 id="slot插槽"><a href="#slot插槽" class="headerlink" title="slot插槽"></a>slot插槽</h1><blockquote>
<p>当组件中某一项需要单独定义，那么就应该使用solt </p>
</blockquote>
<h2 id="单个slot"><a href="#单个slot" class="headerlink" title="单个slot"></a>单个slot</h2><blockquote>
<p>除非子组件模板包含至少一个 <code>&lt;slot&gt;</code> 插口，否则父组件的内容将会被丢弃 ,当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 slot 标签本身。 </p>
</blockquote>
<p>在组件的模版中定义<code>slot</code>插槽</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">"modal"</span>, &#123;</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class="modal"&gt;</span></span><br><span class="line"><span class="string">    	&lt;p&gt;温馨提示&lt;/p&gt;</span></span><br><span class="line"><span class="string">    	&lt;div&gt;</span></span><br><span class="line"><span class="string">    		&lt;slot&gt;&lt;/slot&gt;</span></span><br><span class="line"><span class="string">    	&lt;/div&gt;</span></span><br><span class="line"><span class="string">    	&lt;button&gt;关闭&lt;/button&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">`</span>,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>父组件传值</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;modal&gt;你确定要退出系统吗？&lt;<span class="regexp">/modal&gt;</span></span><br><span class="line"><span class="regexp">&lt;modal&gt;你确定要删除这个内容吗？&lt;/m</span>odal&gt;</span><br></pre></td></tr></table></figure>

<h2 id="具名插槽"><a href="#具名插槽" class="headerlink" title="具名插槽"></a>具名插槽</h2><blockquote>
<p>如果一个组件中想使用多个slot那么此时就应该使用具名slot。 </p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">"modal"</span>, &#123;</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class="modal"&gt;</span></span><br><span class="line"><span class="string">    &lt;slot name="header"&gt;&lt;/slot&gt;</span></span><br><span class="line"><span class="string">    &lt;slot name="content"&gt;&lt;/slot&gt;</span></span><br><span class="line"><span class="string">    &lt;slot name="footer"&gt;&lt;/slot&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">	`</span>,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">modal</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">slot</span>=<span class="string">"header"</span>&gt;</span>温馨提示<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">slot</span>=<span class="string">"content"</span>&gt;</span>你要删除内容吗<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">slot</span>=<span class="string">"footer"</span>&gt;</span>关闭<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">modal</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">modal</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">slot</span>=<span class="string">"header"</span>&gt;</span>提示<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">slot</span>=<span class="string">"content"</span>&gt;</span>你要删除这条记录吗<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">slot</span>=<span class="string">"footer"</span>&gt;</span>开启<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">modal</span>&gt;</span></span><br></pre></td></tr></table></figure>


<h1 id="vue动画"><a href="#vue动画" class="headerlink" title="vue动画"></a>vue动画</h1><blockquote>
<p>Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。</p>
<p>Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。</p>
</blockquote>
<h2 id="基本使用-2"><a href="#基本使用-2" class="headerlink" title="基本使用"></a>基本使用</h2><p>Vue 提供了 <code>transition</code> 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡</p>
<ul>
<li>条件渲染 (使用 <code>v-if</code>)</li>
<li>条件展示 (使用 <code>v-show</code>)</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"demo"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">v-on:click</span>=<span class="string">"show = !show"</span>&gt;</span></span><br><span class="line">    Toggle</span><br><span class="line">  <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">transition</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-show</span>=<span class="string">"show"</span>&gt;</span>hello<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>



<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">'#demo'</span>,</span><br><span class="line">  data: &#123;</span><br><span class="line">    show: <span class="literal">true</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>样式处理</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.v-enter-active</span>,</span><br><span class="line"><span class="selector-class">.v-leave-active</span> &#123;</span><br><span class="line">  <span class="attribute">transition</span>: opacity <span class="number">0.5s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.v-enter</span>,</span><br><span class="line"><span class="selector-class">.v-leave-to</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.v-leave</span>,</span><br><span class="line"><span class="selector-class">.v-enter-to</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="指定name"><a href="#指定name" class="headerlink" title="指定name"></a>指定name</h2><blockquote>
<p>如果有多个动画，可以指定name属性</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">transition</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-show</span>=<span class="string">"show"</span>&gt;</span>hello<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>样式</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.fade-enter-active</span>,</span><br><span class="line"><span class="selector-class">.fade-leave-active</span> &#123;</span><br><span class="line">  <span class="attribute">transition</span>: opacity <span class="number">0.5s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.fade-enter</span>,</span><br><span class="line"><span class="selector-class">.fade-leave-to</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.fade-leave</span>,</span><br><span class="line"><span class="selector-class">.fade-enter-to</span> &#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="结合动画使用"><a href="#结合动画使用" class="headerlink" title="结合动画使用"></a>结合动画使用</h2><p>结构</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"show = !show"</span>&gt;</span>切换<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">transition</span> <span class="attr">name</span>=<span class="string">"fade"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-show</span>=<span class="string">"show"</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>样式</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.fade-enter-active</span> &#123;</span><br><span class="line">  <span class="attribute">animation</span>: bounce-in <span class="number">0.5s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.fade-leave-active</span> &#123;</span><br><span class="line">  <span class="attribute">animation</span>: bounce-in <span class="number">0.5s</span> reverse;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> bounce-in &#123;</span><br><span class="line">  0% &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">0</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  50% &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.5</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  100% &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="自定义过渡的类名"><a href="#自定义过渡的类名" class="headerlink" title="自定义过渡的类名"></a>自定义过渡的类名</h2><p>我们可以通过以下特性来自定义过渡类名：</p>
<ul>
<li><code>enter-class</code></li>
<li><code>enter-active-class</code></li>
<li><code>enter-to-class</code></li>
<li><code>leave-class</code></li>
<li><code>leave-active-class</code></li>
<li><code>leave-to-class</code> </li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">transition</span> <span class="attr">name</span>=<span class="string">"fade"</span> <span class="attr">enter-active-class</span>=<span class="string">"in"</span> <span class="attr">leave-active-class</span>=<span class="string">"out"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-show</span>=<span class="string">"show"</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br></pre></td></tr></table></figure>



<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.in</span> &#123;</span><br><span class="line">  <span class="attribute">animation</span>: bounce-in <span class="number">0.5s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.out</span> &#123;</span><br><span class="line">  <span class="attribute">animation</span>: bounce-in <span class="number">0.5s</span> reverse;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> bounce-in &#123;</span><br><span class="line">  0% &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">0</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  50% &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.5</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  100% &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="配合animate-css使用"><a href="#配合animate-css使用" class="headerlink" title="配合animate.css使用"></a>配合animate.css使用</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"https://cdn.jsdelivr.net/npm/animate.css@3.5.1"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"example-3"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"show = !show"</span>&gt;</span></span><br><span class="line">    Toggle render</span><br><span class="line">  <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">transition</span></span></span><br><span class="line"><span class="tag">    <span class="attr">name</span>=<span class="string">"custom-classes-transition"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">enter-active-class</span>=<span class="string">"animated tada"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">leave-active-class</span>=<span class="string">"animated bounceOutRight"</span></span></span><br><span class="line"><span class="tag">  &gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-if</span>=<span class="string">"show"</span>&gt;</span>hello<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h1 id="自定义指令"><a href="#自定义指令" class="headerlink" title="自定义指令"></a>自定义指令</h1><blockquote>
<p>有的情况下，你仍然需要对<strong>普通 DOM 元素进行底层操作</strong>，这时候就会用到自定义指令。</p>
<p>比如：获取文本框的焦点 </p>
</blockquote>
<h2 id="自定义指令-1"><a href="#自定义指令-1" class="headerlink" title="自定义指令"></a>自定义指令</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">- 自定义一个指令</span><br><span class="line">- 使用一个自定义指令</span><br></pre></td></tr></table></figure>

<p>定义一个全局的指令</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 注册一个全局自定义指令 `v-focus`</span></span><br><span class="line"><span class="comment">// 参数1：指令的名称</span></span><br><span class="line"><span class="comment">// 参数2：指令的配置项（钩子函数）</span></span><br><span class="line">Vue.directive(<span class="string">'focus'</span>, &#123;</span><br><span class="line">  <span class="comment">// 当被绑定的元素插入到 DOM 中时……</span></span><br><span class="line">  <span class="comment">// el: 当前绑定的元素</span></span><br><span class="line">  inserted: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 聚焦元素</span></span><br><span class="line">    el.focus()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>使用自定义指令</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">v-focus</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="全局指令与局部指令"><a href="#全局指令与局部指令" class="headerlink" title="全局指令与局部指令"></a>全局指令与局部指令</h2><p>定义全局指令</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 注册一个全局自定义指令 `v-focus`</span></span><br><span class="line"><span class="comment">// 参数1：指令的名称</span></span><br><span class="line"><span class="comment">// 参数2：指令的配置项（钩子函数）</span></span><br><span class="line">Vue.directive(<span class="string">'focus'</span>, &#123;</span><br><span class="line">  <span class="comment">// 当被绑定的元素插入到 DOM 中时……</span></span><br><span class="line">  <span class="comment">// el: 当前绑定的元素</span></span><br><span class="line">  inserted: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 聚焦元素</span></span><br><span class="line">    el.focus()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>定义局部指令</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">directives: &#123;</span><br><span class="line">  focus: &#123;</span><br><span class="line">    <span class="comment">// 指令的定义</span></span><br><span class="line">    inserted: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</span><br><span class="line">      el.focus()</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="指令的钩子函数"><a href="#指令的钩子函数" class="headerlink" title="指令的钩子函数"></a>指令的钩子函数</h2><ul>
<li><code>bind</code>:  只会调用一次，当指令绑定到当前元素上时调用</li>
<li><code>inserted</code>: 被绑定元素插入父节点时调用</li>
<li><code>update</code>: 指令的值发生改变的时候</li>
<li><code>componentUpdated</code>: 指令所在的组件中所有的DOM都更新完成的时候</li>
<li><code>unbind</code>：只调用一次，指令与元素解绑时调用。</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">Vue.directive(<span class="string">'focus'</span>, &#123;</span><br><span class="line">    <span class="comment">// 只会调用一次，当指令绑定到当前元素上时调用</span></span><br><span class="line">    bind (el) &#123;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 当前元素被插入到父节点的时候调用(渲染时)</span></span><br><span class="line">    inserted (el) &#123;</span><br><span class="line">        el.focus()</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 当指令对应的数据发生改变的时候</span></span><br><span class="line">    update () &#123;</span><br><span class="line"></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 所有的DOM都更新之后</span></span><br><span class="line">    componentUpdated () &#123;</span><br><span class="line"></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 指令与元素解绑的时候</span></span><br><span class="line">    unbind () &#123;</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h2 id="钩子函数的参数"><a href="#钩子函数的参数" class="headerlink" title="钩子函数的参数"></a>钩子函数的参数</h2><p>所有的钩子函数两个参数<code>el</code>和<code>binding</code></p>
<p>指令的组成</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">v-指令名:指令参数.指令修饰符.指令修饰符 = <span class="string">"指令的值"</span></span><br><span class="line">v-on:click.enter.prevent = <span class="string">"clickFn"</span></span><br></pre></td></tr></table></figure>

<p>指令的参数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">el: 当前元素</span><br><span class="line">binding：一个对象，包含以下属性：</span><br><span class="line">    name：指令名，不包括 v- 前缀。</span><br><span class="line">    value：指令的绑定值，例如：v-my-directive=<span class="string">"1 + 1"</span> 中，绑定值为 <span class="number">2</span>。</span><br><span class="line">    oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。</span><br><span class="line">    expression：字符串形式的指令表达式。例如 v-my-directive=<span class="string">"1 + 1"</span> 中，表达式为 <span class="string">"1 + 1"</span>。</span><br><span class="line">    arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 <span class="string">"foo"</span>。</span><br><span class="line">    modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 &#123; <span class="attr">foo</span>: <span class="literal">true</span>, <span class="attr">bar</span>: <span class="literal">true</span> &#125;。</span><br></pre></td></tr></table></figure>

<h2 id="指令的简写"><a href="#指令的简写" class="headerlink" title="指令的简写"></a>指令的简写</h2><p>在很多时候，你可能想在 <code>bind</code> 和 <code>update</code> 时触发相同行为，而不关心其它的钩子。比如这样写:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">Vue.directive(<span class="string">'color-swatch'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">el, binding</span>) </span>&#123;</span><br><span class="line">  el.style.backgroundColor = binding.value</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>







      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  

      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://dttx123.gitee.io/2018/08/22/vue/vue-router/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/blog/images/avatar.jpg">
      <meta itemprop="name" content="大春哥">
      <meta itemprop="description" content="IT">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Starry Night">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          
            <a href="/blog/2018/08/22/vue/vue-router/" class="post-title-link" itemprop="url">vue 基础</a>
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2018-08-22 00:00:00" itemprop="dateCreated datePublished" datetime="2018-08-22T00:00:00+08:00">2018-08-22</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-05-13 23:27:08" itemprop="dateModified" datetime="2020-05-13T23:27:08+08:00">2020-05-13</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/vue/" itemprop="url" rel="index"><span itemprop="name">vue</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
          <h1 id="单页应用程序与路由"><a href="#单页应用程序与路由" class="headerlink" title="单页应用程序与路由"></a>单页应用程序与路由</h1><h2 id="SPA-单页应用程序"><a href="#SPA-单页应用程序" class="headerlink" title="SPA - 单页应用程序"></a>SPA - 单页应用程序</h2><ul>
<li>SPA： <code>Single Page Application</code>  单页面应用程序</li>
<li>MPA : <code>Multiple Page Application</code>多页面应用程序 </li>
</ul>
<p><a href="https://baike.baidu.com/item/SPA/17536313?fr=aladdin" target="_blank" rel="noopener">SPA </a></p>
<p><a href="https://music.163.com/" target="_blank" rel="noopener">网易云音乐</a></p>
<h3 id="优势"><a href="#优势" class="headerlink" title="优势"></a>优势</h3><ul>
<li>传统的多页面应用程序，每次请求服务器返回的都是一整个完整的页面</li>
<li>单页面应用程序只有第一次会加载完整的页面</li>
<li>以后每次请求仅仅获取必要的数据，减少了请求体积，加快页面响应速度，降低了对服务器的压力</li>
<li>SPA更好的用户体验，运行更加流畅</li>
</ul>
<h3 id="缺点"><a href="#缺点" class="headerlink" title="缺点"></a>缺点</h3><ol>
<li>开发成本高 (需要学习路由)  <code>vue-router   react-router</code></li>
<li><strong>不利于 SEO</strong> 搜索引擎优化   </li>
</ol>
<h2 id="路由介绍"><a href="#路由介绍" class="headerlink" title="路由介绍"></a>路由介绍</h2><ul>
<li><strong>路由</strong> : 是浏览器 <strong>URL 中的哈希值</strong>( # hash) 与 <strong>展示视图内容(组件)</strong> 之间的对应规则<ul>
<li>简单来说,路由就是一套映射规则(一对一的对应规则), 由开发人员制定规则.- </li>
<li>当 URL 中的哈希值( <code>#</code> hash) 发生改变后,路由会根据制定好的<strong>规则</strong>, 展示对应的视图内容(组件)</li>
</ul>
</li>
<li><strong>为什么要学习路由?</strong><ul>
<li>渐进式 =&gt;vue =&gt; vuer-router (管理组件之间的跳转)</li>
<li>在 web App 中, 经常会出现通过一个页面来展示和管理整个应用的功能.</li>
<li>SPA 往往是功能复杂的应用,为了有效管理所有视图内容,前端路由 应运而生.</li>
</ul>
</li>
<li><strong>vue 中的路由</strong> : 是 <strong>hash</strong> 和 <strong>component</strong> 的对应关系, <strong>一个哈希值对应一个组件</strong></li>
</ul>
<h1 id="vue-router（官方提供）"><a href="#vue-router（官方提供）" class="headerlink" title="vue-router（官方提供）"></a>vue-router（官方提供）</h1><p><a href="https://router.vuejs.org/zh/" target="_blank" rel="noopener">https://router.vuejs.org/zh/</a></p>
<h2 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h2><ul>
<li>安装</li>
</ul>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add vue-router</span><br></pre></td></tr></table></figure>

<ul>
<li>引入路由 文件</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"vue-router.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>创建路由并且挂载到vue实例</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter()</span><br><span class="line"><span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  el: <span class="string">'#app'</span>,</span><br><span class="line">  data: &#123;</span><br><span class="line">    msg: <span class="string">'hello vue'</span></span><br><span class="line">  &#125;,</span><br><span class="line">  router</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h2 id="具体步骤"><a href="#具体步骤" class="headerlink" title="具体步骤"></a>具体步骤</h2><p>实现vue的具体步骤</p>
<ul>
<li>配置路由规则  hash值和组件的映射规则</li>
<li>提供对应组件</li>
<li>配置路由的显示出口, 确定匹配到的组件显示的位置</li>
</ul>
<p>配置路由规则</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter(&#123;</span><br><span class="line">    <span class="comment">// 配置路由的规则</span></span><br><span class="line">    routes: [</span><br><span class="line">        &#123; <span class="attr">path</span>: <span class="string">'/one'</span>, <span class="attr">component</span>: One &#125;, </span><br><span class="line">        &#123; <span class="attr">path</span>: <span class="string">'/two'</span>, <span class="attr">component</span>: Two &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>



<p>创建对应组件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> One = &#123;</span><br><span class="line">  template: <span class="string">` &lt;div&gt; 子组件 one &lt;/div&gt; `</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> Two = &#123;</span><br><span class="line">  template: <span class="string">` &lt;div&gt; 子组件 one &lt;/div&gt; `</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<p>配置路由的出口，显示位置</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="路由导航"><a href="#路由导航" class="headerlink" title="路由导航"></a>路由导航</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 使用 router-link 组件来导航. --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 通过传入 `to` 属性指定链接. --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- &lt;router-link&gt; 默认会被渲染成一个 `&lt;a&gt;` 标签 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/foo"</span>&gt;</span>Go to Foo<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/bar"</span>&gt;</span>Go to Bar<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="导航高亮"><a href="#导航高亮" class="headerlink" title="导航高亮"></a>导航高亮</h2><ul>
<li><strong>点击导航 =</strong>&gt; 元素里添加了两个类</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#/one"</span> <span class="attr">class</span>=<span class="string">"router-link-exact-active router-link-active"</span>&gt;</span>One<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#/two"</span> <span class="attr">class</span>=<span class="string">""</span>&gt;</span>Two<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><strong>修改方式1 : 直接修改类的样式</strong></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.router-link-exact-active</span>,</span><br><span class="line"><span class="selector-class">.router-link-active</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: red;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">50px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>精确匹配和模糊匹配</p>
<ul>
<li>精确匹配 : router-link-exact-active 类名 : 只有当 <code>浏览器地址栏中的哈希值 与 router-link 的 to 属性值,完全匹配对,才会添加该类</code></li>
<li>模糊匹配: router-link-active 类名 : 只要 <code>浏览器地址栏中的哈希值</code> 包含 router-link 的 to 属性值,就会添加该类名</li>
<li>解决办法 : 加个 exact</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link to=<span class="string">"/"</span> exact&gt;</span><br><span class="line">  One</span><br><span class="line">&lt;<span class="regexp">/router-link&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="路由重定向"><a href="#路由重定向" class="headerlink" title="路由重定向"></a>路由重定向</h2><ul>
<li>解释：将 <code>/</code> 重定向到 <code>/home</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123; <span class="attr">path</span>: <span class="string">'/'</span>, <span class="attr">redirect</span>: <span class="string">'/home'</span> &#125;</span><br></pre></td></tr></table></figure>

<h2 id="编程式导航"><a href="#编程式导航" class="headerlink" title="编程式导航"></a>编程式导航</h2><p><strong>在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push</strong></p>
<p>当你点击 <code>&lt;router-link&gt;</code> 时，这个方法会在内部调用，所以说，点击 <code>&lt;router-link :to=&quot;...&quot;&gt;</code> 等同于调用 <code>this.$router.push(...)</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.router.push(<span class="string">'/home'</span>)</span><br></pre></td></tr></table></figure>


      
    </div>

    
    
    
      <footer class="post-footer">
        <div class="post-eof"></div>
      </footer>
  </article>
  
  
  


  
  <nav class="pagination">
    <span class="page-number current">1</span><a class="page-number" href="/blog/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/blog/page/4/">4</a><a class="extend next" rel="next" href="/blog/page/2/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
  </nav>



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="大春哥"
      src="/blog/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">大春哥</p>
  <div class="site-description" itemprop="description">IT</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/blog/archives/">
        
          <span class="site-state-item-count">35</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/blog/categories/">
          
        <span class="site-state-item-count">11</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/blog/tags/">
          
        <span class="site-state-item-count">17</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">大春哥</span>
</div>

        








      </div>
    </footer>
  </div>

  
  <script src="/blog/lib/anime.min.js"></script>
  <script src="/blog/lib/velocity/velocity.min.js"></script>
  <script src="/blog/lib/velocity/velocity.ui.min.js"></script>

<script src="/blog/js/utils.js"></script>

<script src="/blog/js/motion.js"></script>


<script src="/blog/js/schemes/pisces.js"></script>


<script src="/blog/js/next-boot.js"></script>




  




  
<script src="/blog/js/local-search.js"></script>













  

  

</body>
</html>
